CSS Grid布局中如何指定元素优先放置的首选列

原有代码不生效的核心原因 #

你给所有蓝色.foo元素硬编码了固定列规则强制锁定第一列，所有红色.bar元素也被强制锁定第二列。grid-auto-flow: dense仅能调整未手动设置固定位置的元素的摆放、填充空位；已经被强制指定列的元素，哪怕目标列排满、另一列有空位，也不会自动跨列移动，只会在当前列不断新增行，自然达不到溢出补位的效果。

固定DOM结构下的纯CSS实现 #

针对你给出的「所有蓝色元素在前、红色元素在后，总元素数固定」的场景，可以通过选择器给超出单列容量的元素取消固定列限制，配合dense自动填充空位，就能实现参考图的预期效果：

.grid {
  display: grid;
  grid-auto-flow: dense;
  width: 300px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: .25rem;
}
.item {
  padding: 0.5rem 1rem;
  color: white;
}
/* 总元素共8个，单列最多容纳4个，前4个蓝色固定在左列 */
.foo:nth-child(-n+4) {
  background: blue;
  grid-column: 1;
}
/* 超出单列容量的蓝色不限制列，自动填充空位 */
.foo:nth-child(n+5) {
  background: blue;
}
/* 所有红色元素固定在右列，3个红刚好占右列前3行 */
.bar {
  background: red;
  grid-column: 2;
}

运行上述代码后，第5个蓝色元素会自动填充到右列第4行的空位，和参考效果完全一致。

通用场景的限制 #

如果你的DOM顺序是蓝红混排、或者元素数量动态变化，目前纯CSS没有通用无hack的实现方案：

• CSS布局引擎没有提供「某类元素优先放入指定列，列满后自动流入其他列」的原生布局逻辑
• CSS无法提前动态统计两类元素的总数，自动计算单列容量并给超出的元素解除列限制
  这类动态场景下只需要配合少量JS，计算两类元素数量后动态给超出容量的元素添加类名、解除列固定限制即可实现。

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