CSS Grid：如何让隐式网格项占满父容器宽度？

可以通过grid-auto-columns定义隐式列宽度，配合grid-auto-flow: dense实现需求，无需单独定位元素，也不用grid-column。

修改后的CSS #

.row {
  display: grid;
  margin-bottom: 2rem;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid black;
  /* 移除grid-auto-flow: column，默认row流即可满足垂直排列 */
}

.item {
  border: 1px solid green;
}

.row:nth-child(odd) {
  background-color: aqua;
  grid-auto-flow: dense; /* 启用密集布局，自动填充空白区域 */
  grid-template-columns: 1fr 2fr; /* 保持2列布局 */
  grid-auto-columns: 100%; /* 指定隐式创建的列宽度为容器100% */
}

原理说明 #

1. grid-auto-columns: 100%：直接定义隐式网格列的宽度为容器的100%，当第3个元素触发隐式列时，会自动占满整行宽度
2. grid-auto-flow: dense：让网格布局自动填充空白位置，确保隐式项不会出现错位，完美适配2列转整行的布局
3. 移除基础.row的grid-auto-flow: column，默认的row流会让元素按行排列，符合需求

完整运行代码 #

HTML

<div class="row">
  <span class="item">1</span>
  <span class="item">2</span>
  <span class="item">3</span>
</div>
<div class="row">
  <span class="item">1</span>
  <span class="item">2</span>
  <span class="item">3</span>
</div>
<div class="row">
  <span class="item">2</span>
</div>

CSS

.row {
  display: grid;
  margin-bottom: 2rem;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid black;
}

.item {
  border: 1px solid green;
}

.row:nth-child(odd) {
  background-color: aqua;
  grid-auto-flow: dense;
  grid-template-columns: 1fr 2fr;
  grid-auto-columns: 100%;
}

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