CSS Grid不指定行号时如何让指定列元素自动另起新行

解决方案 #

你可以通过CSS的break-before: row属性实现需求，无需指定具体行号，也不用修改HTML结构。修改后的CSS代码如下：

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

.new-row {
    grid-column-start: 1;
    /* 强制当前元素从新行开始放置 */
    break-before: row;
}

.new-row.col-2 {
    grid-column-start: 2;
}

效果说明 #

• 所有携带new-row类的元素都会强制在网格中另起新行渲染，不管上一行是否有空余列位
• 额外携带col-2类的元素会在新行的第二列位置渲染，不会占用第一列的位置

按照你给出的示例HTML结构，最终渲染效果完全符合预期：

1. 第一行：列1、列2各有一个元素
2. 第二行：仅列1有元素（对应<div class="new-row">Column 1</div>）
3. 第三行：仅列2有元素（对应<div class="new-row col-2">Column 2</div>）

兼容性说明 #

break-before: row在所有现代浏览器（Chrome 50+、Firefox 65+、Safari 12.1+、Edge 79+）都支持网格布局场景下的使用，完全满足常规生产环境需求。

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