如何让CSS Grid项目自动适配列宽实现动态布局？

需求描述 #

• 3个网格项：第一行左右各一个，第二行单个占满整行
• 2个网格项：一行左右各占一列
• 1个网格项：占满所有可用空间
• 布局需动态且自动适配子项数量

我用CSS Grid已经实现了前两种情况，但只有紫色项（单个子项）时无法正常占满空间。需要仅用CSS Grid解决该问题，不考虑flexbox等其他方案。

原始代码 #

CSS #

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 2px solid black;
  margin-bottom: 10px;
}

.grid div {
  background: blue;
  height: 50px;
}

.grid > div:nth-child(1){
  grid-column: 1 / 2; /* 能否修改这一行让三种情况都生效？ */
  background: #952662;
}  

.grid > div:nth-child(2){
  grid-column: 2 / -1;
  background: #263195;
}  

.grid > div:nth-child(3){
  grid-column: 1 / -1;
  background: #E49F17;
}  

HTML #

<!-- 正常生效 -->
<div class="grid"><div></div><div></div><div></div></div>

<!-- 正常生效 -->
<div class="grid"><div></div><div></div></div>

<!-- 无法正常生效 -->
<div class="grid"><div></div></div>

解决方案 #

只需要修改第一个子项的样式规则，通过CSS伪类区分"唯一子项"和"非唯一子项"的情况：

修改后的CSS #

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border: 2px solid black;
  margin-bottom: 10px;
}

.grid div {
  background: blue;
  height: 50px;
}

/* 当第一个子项不是唯一子项时，保持原列位置 */
.grid > div:first-child:not(:only-child) {
  grid-column: 1 / 2;
  background: #952662;
}  

/* 当子项是唯一项时，占满整行 */
.grid > div:only-child {
  grid-column: 1 / -1;
  background: #952662;
}

.grid > div:nth-child(2){
  grid-column: 2 / -1;
  background: #263195;
}  

.grid > div:nth-child(3){
  grid-column: 1 / -1;
  background: #E49F17;
}  

原理说明 #

• 使用:only-child伪类精准匹配网格容器中只有一个子项的情况，强制让它占满所有列（grid-column: 1 / -1）
• 使用:first-child:not(:only-child)确保当容器中有多个子项时，第一个子项仍保持在第一列的位置，不影响原有布局逻辑

这样三种子项数量的情况都能自动适配，满足动态布局的需求。

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