如何为CSS Grid设置行与列均等的自适应间距？

刚好碰到过类似的需求，咱们来一步步解决这个问题~

首先看你当前的代码，水平方向的自适应间距是因为grid-template-columns用了repeat(auto-fill, minmax(210px, 1fr))，再配合.picture_tile的margin: auto，让每列的额外空间均匀分配成了左右间隙。要让行间距和这个水平间隙同步，只需要给行也加上相同的自适应规则就行：

修改后的完整CSS代码 #

#container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-auto-rows: minmax(210px, 1fr); /* 关键：让行高和列宽用相同的自适应逻辑 */
}

.picture_tile {
  width: 200px;
  height: 200px;
  position: relative;
  background: white;
  color: black;
  margin: auto; /* 保持上下左右自动margin，均分单元格内的额外空间 */
}

原理解释 #

• 原来的容器只定义了列的自适应规则，行高默认是auto，刚好贴合.picture_tile的高度，所以没有额外行间距。
• 新增的grid-auto-rows: minmax(210px, 1fr)让每行的高度和每列的宽度遵循完全一致的逻辑：
  • 当窗口宽度较小时，列宽保持最小210px，行高也保持最小210px，此时.picture_tile的上下左右margin各为5px，行列间距都是10px（左右/上下margin相加）。
  • 当窗口变宽时，列宽会通过1fr分配更多剩余空间，行高也同步扩展，.picture_tile的上下左右margin会自动增大，最终行间距和列间距始终保持一致。

额外优化建议 #

如果你的容器高度不是固定值（比如随内容自动拉伸），可以给容器加上align-content: start，避免窗口高度过大时行间距被过度拉伸：

#container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-auto-rows: minmax(210px, 1fr);
  align-content: start; /* 防止垂直方向过度拉伸 */
}

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