CSS Grid两列布局问题：如何让右列元素不跳过起始单元格？

这个问题我之前也碰到过，核心原因是CSS Grid默认的流式布局逻辑：它会严格按照DOM中元素的先后顺序来排列网格项。你的代码里先放了6个.product元素，它们会依次占据第1到第6行的左列（column 1），之后的.box元素就只能从第7行的右列开始排列，自然就空出了前6行的右列位置。

要实现你想要的效果——让.box从第1行的右列开始依次排列，不用手动设置每个元素的行列位置，只需要给网格容器加上grid-auto-flow: dense属性即可：

.two-col-grid-container {
  display: grid;
  grid-template-columns: 45% 45%;
  grid-column-gap: 20px;
  grid-auto-flow: dense; /* 关键属性：自动填充空白单元格 */
}

.two-col-grid-container .product {
  grid-column: 1;
  background-color: green;
  border: 1px solid black;
}

.two-col-grid-container .box {
  grid-column: 2;
  background-color: pink;
  border: 1px solid black;
}

原理说明 #

grid-auto-flow: dense会让网格布局算法主动填补布局中的空白单元格，不再严格遵循DOM元素的顺序。这样你的.box元素就会自动填充到左列.product旁边的右列空位里，从第1行开始依次排列，完全符合你的需求。

如果担心dense可能对其他布局产生影响（比如后续有更多元素时的视觉顺序），另一种可选方案是调整DOM结构，把.product和.box交替放置，但显然你不想这么做，所以grid-auto-flow: dense是最简洁的解决办法。

内容的提问来源于stack exchange，提问作者Nicolas S.Xu