css - 如果隐藏下一个元素，如何使网格元素拉伸(stretch)到全宽？

Question

伙计们。我试图理解 CSS Grid 并发现了一种我认为很简单但结果有点复杂的行为。我需要遵循 12 列布局，一行有 2 个元素，但如果它是单个元素，我需要这些元素填充 100% 的宽度。

我尝试使用自动调整，它几乎完成了工作，但我找不到以这种方式明确设置 12 列的方法。

这是我的代码片段:

<div class="autofit">
  <div class="content"></div>
  <div class="banner"></div>
</div>

.autofit { 
            display:grid; 
            grid-template-columns: repeat(12, minmax(0, 1fr));
            grid-gap: 20px;
            text-align: center; 
    } 

   .autofit .content{  
            grid-column: 1/9;
   }
   .autofit .banner { 
            grid-column: 10/-1; 
    }

这样网格会按预期工作，但如果我删除 .banner 元素，.content 不会拉伸(stretch)以填充可用空间):

Answer 1

使用 :only-child 定义和附加规则:

.autofit {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-gap: 20px;
  text-align: center;
  margin:5px;
}
.autofit > *{
  height:20px;
}
.autofit .content {
  grid-column: 1/9;
  background:red;
}

.autofit .banner {
  grid-column: 10/-1;
  background:blue;
}

.autofit > :only-child{
  grid-column: 1/-1;
}

<div class="autofit">
  <div class="content"></div>
  <div class="banner"></div>
</div>

<div class="autofit">
  <div class="content"></div>
</div>

<div class="autofit">
  <div class="banner"></div>
</div>