能否让Grid容器的指定子元素脱离布局流单独占据新行？

解决方案 #

你只需要给.another-line添加以下CSS样式即可实现需求：

.another-line {
  grid-column: 1 / -1;
  break-before: row;
}

样式说明

• grid-column: 1 / -1：让元素从网格第一列的起始边界延伸到最后一列的结束边界，自动占满整行宽度，不需要硬编码网格列数，适配性更强
• break-before: row：强制在该元素之前进行行分隔，无论前面有多少个子元素、前序行是否有剩余列位，该元素都会从全新的一行开始渲染

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