如何在CSS Grid中实现类似Flexbox的列对齐效果？

在12列Grid系统中，两个各占3列的元素默认会紧邻排列，要实现Flexbox中justify-content: space-between的两端对齐效果，且无需手动指定元素的起始列（如grid-column: 9/12），可以通过以下两种方法实现：

方法一：利用Grid负索引定位末尾元素 #

Grid支持负索引引用列线，-1代表最后一条列线，通过相对末尾的跨度设置，无需硬编码具体列数：

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.item {
  grid-column: span 3;
  background: lightblue;
  padding: 1rem;
}

/* 让第二个元素占据最后3列 */
.item:nth-child(2) {
  grid-column: span 3 / -1;
  /* 等价写法：grid-column: -4 / -1; */
}

这种方法保留了12列固定网格结构，元素仍遵循span $number的列占用规则，且负索引写法不受总列数变化影响（比如后续调整为16列系统，该规则依然生效）。

方法二：调整布局流结合justify-content #

如果需要Grid自动处理元素分布（比如未来可能增加元素），可以修改自动布局行为，让元素单行分布并两端对齐：

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  /* 优先按列方向填充元素，强制单行排列 */
  grid-auto-flow: column;
  /* 让网格项在容器内两端对齐 */
  justify-content: space-between;
}

.item {
  grid-column: span 3;
  background: lightblue;
  padding: 1rem;
}

该方法下，Grid会将所有span 3的元素放在同一行，通过justify-content: space-between自动分配中间空白，无需手动控制元素位置。

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