17370845950

使用 gap 和 align-content 可精确控制 CSS Grid 布局的间距与对齐：gap 设置行列间距，align-content 管理多行在交叉轴上的分布，二者协同优化网格整体布局。

在使用 CSS Grid 布局时，控制多行多列之间的间距以及整体内容的对齐方式是常见的需求。通过 gap 和 align-content 属性的结合使用，可以精确地控制网格项之间的空隙和网格线之间的空间分配，尤其在容器有剩余空间时效果更明显。

gap：设置网格行列间距

gap 属性用于定义网格行与列之间的间距，它是一个简写属性，等价于 row-gap 和 column-gap 的组合。

• gap: 10px; 表示行和列的间距都是 10px
• gap: 10px 20px; 表示行间距为 10px，列间距为 20px

这个属性能有效替代过去使用 margin 或 padding 来制造间隔的做法，让布局更整洁、响应更一致。

align-content：控制多行网格的整体对齐

当网格容器的高度大于所有网格行的总高度时，就会出现多余空间。align-content 决定了这些网格行如何在交叉轴（通常是垂直方向）上分布。

常见取值包括：

• start：所有行靠上对齐
• end：所有行靠下对齐
• center：所有行居中对齐
• space-between：行之间均匀分布，首尾行贴边
• space-around：每行周围分配相等空间
• space-evenly：所有间隙完全均等

注意：align-content 只在有多余空间且网格轨道数量大于一行/一列时才生效。

gap 与 align-content 的协同作用

当同时设置了 gap 和 align-content，两者的交互会影响整体视觉布局。

比如，使用 space-between 时，gap 定义的间距依然存在，而额外的空间会均匀分布在行与行之间（不包括首尾外侧）；而 space-around 则会让每行的上下都拥有相等空间，其中间隙包含 gap 的值。

.container {
  display: grid;
  grid-template-rows: repeat(3, 50px);
  grid-template-columns: repeat(4, 1fr);
  gap: 15px 10px;
  align-content: center;
  height: 400px; /* 高于 3*50 + 2*15 = 180px，所以有剩余空间 */
}

此时三行网格整体在容器中垂直居中，行间距保持 15px，列间距为 10px，align-content 控制的是整个网格块的位置分布。

基本上就这些。合理搭配 gap 和 align-content，能让多行多列的 Grid 布局既整齐又灵活，特别适合卡片列表、仪表盘等复杂界面设计。关键是要理解容器是否有剩余空间，以及这些属性在不同对齐模式下的表现差异。