如何设置CSS Grid布局：首行4列次行3列实现7张图片居中？

你可以通过调整CSS Grid的核心属性，轻松实现第一行4张、第二行3张居中的布局效果，具体方案如下：

方法一：固定列宽+居中对齐 #

如果图片宽度固定，直接定义4列并让网格内容在容器内居中：

.image-grid {
  display: grid;
  /* 定义4列，每列宽度与图片固定宽一致（示例为200px） */
  grid-template-columns: repeat(4, 200px);
  /* 让整个网格内容水平居中 */
  justify-content: center;
  /* 可选：设置图片间的间距 */
  gap: 16px;
}

.image-grid img {
  width: 100%;
  height: auto;
}

第一行4张图片会填满4列，第二行3张图片会组成一个600px宽的网格块，在容器内居中显示，每张图片宽度与第一行保持一致。

方法二：响应式列宽+居中对齐 #

如果需要适配不同屏幕尺寸，用minmax定义弹性列宽，同时限制网格最大宽度：

.image-grid {
  display: grid;
  /* 4列，每列最小150px，最大占满可用空间 */
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  justify-content: center;
  gap: 16px;
  /* 限制网格最大宽度，避免列过宽 */
  max-width: 1200px;
  margin: 0 auto;
}

.image-grid img {
  width: 100%;
  height: auto;
}

屏幕宽度足够时，保持第一行4张、第二行3张居中；屏幕变窄时，列数会自动减少（如3列、2列），同时每行内容始终居中。

原代码问题说明 #

你之前的repeat(4, minmax(0, 1fr))会让4列占满整个容器宽度，第二行的3张图片默认左对齐填充前3列。添加justify-content: center后，当网格总宽度小于容器宽度时，整个网格块会自动居中，从而实现第二行3张图片的居中效果。

内容的提问来源于stack exchange，提问作者Jaacoubi