动态列Grid布局：如何让.row元素独占整行并跨列？

你的问题核心在于使用了grid-auto-flow: column dense，这个属性会让Grid优先按列方向排列元素，导致grid-column: 1 / -1无法正确横跨所有列——因为此时Grid的列是动态生成的，.row会被当作列元素挤到右侧，而非单独占一行。

修复方案 #

移除grid-auto-flow: column dense（改用默认的行方向流），并通过grid-column: 1 / -1让.row横跨所有列，同时调整.big元素的布局规则以符合预期：

.container {
  display: grid;
  /* 移除列方向流，使用默认的行方向排列 */
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  /* auto-fit自动根据子元素数量生成适配列数，minmax保证列有最小宽度 */
  gap: 8px;
}

.container > * {
  padding: 8px;
  border: solid 1px;
}

.container .big {
  grid-row: span 2; /* 简化跨两行的写法 */
  grid-column: 1; /* 固定在第一列，确保布局符合预期 */
}

.container .row {
  grid-column: 1 / -1; /* 强制横跨所有列 */
}

效果说明 #

• Grid 1：2个COL自动排列为2列，.row在第二行横跨整行
• Grid 2：3个COL自动排列为3列，.row在第二行横跨整行
• Grid 3：.big占第一列的2行，剩余2个COL排列在第二列的两行，.row在第三行横跨整行

为什么原方法失效？ #

grid-auto-flow: column dense会改变Grid的轨道生成逻辑：元素优先填满每一列的行，再生成新列。此时.row会被分配到新的列中，而非单独的行，因此grid-column: 1 / -1无法生效——因为列的数量是动态增加的，.row本身就是其中一列的元素。

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