CSS Grid布局：如何指定.note元素从新行开始？

问题原因 #

CSS Grid默认会自动填充网格剩余空间：第二行的两个.card各占4列，总宽度为8列，剩余4列空间，因此第一个.note会被填充到第二行的剩余位置，而非新行。

解决方案 #

方案一：强制第一个.note从新行首列开始

给第一个.note设置grid-column: 1 / span 3，让它直接占据第三行的第1-3列，后续.note会自动依次排列：

* {
  border: 1px solid;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 24px;
}

.item {
  padding: 24px;
}

.banner-img {
  grid-column: span 12;
}

.card {
  grid-column: span 4;
}

.note {
  grid-column: span 3;
}

/* 新增样式 */
.note:first-of-type {
  grid-column: 1 / span 3;
}

方案二：指定.note所在的行

通过grid-row属性将所有.note直接定位到第三行，Grid会自动创建对应的行：

/* 修改.note的样式 */
.note {
  grid-column: span 3;
  grid-row: 3;
}

方案三：使用换行强制属性

给第一个.note添加break-before: row，强制元素换行到新行：

/* 新增样式 */
.note:first-of-type {
  break-before: row;
}

效果验证 #

以上任意一种方案都能让三个.note元素从新行（第三行）开始排列，满足设定的布局需求。

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