时间戳

首页 > 解决方案 > 如果下一个元素被隐藏，如何使网格项拉伸到全宽？

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

问题描述

伙计们。我试图理解 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 不会拉伸以填充可用空间）：

标签： csscss-grid

解决方案

用于: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>

推荐阅读