如何使网格列适合其余空间

Question

我有一个包含三列的网格包装器，其中第一列最大，宽度为 2fr，第二列和第三列的大小相同，它们都占用 1fr 的宽度。我想要的是创建一个具有动态列数的网格模板，例如，如果我删除其中一列，其余列应该同样采用剩余大小。 这是我迄今为止尝试过的小提琴

.wrapper {
  display: grid;
  height: 100px;
  width: 300px;
  grid-template-columns: 2fr 1fr 1fr;
  border: 1px solid black;
}

.first {
  background-color: red;
}

.second {
  background-color: lightblue;
}

.third {
  background-color: lightgreen;
}

<div class="wrapper">
  <div class="first">
  1
  </div>
  <div class="second">
  2
  </div>
 <!-- <div class="third">
  3
  </div> -->
</div>

Fiddle

我已尝试使用 grid-template-columns: 2fr auto auto，但效果不佳。预期的结果是这样的

但实际结果是这样的

知道如何解决这个问题吗？所有示例将不胜感激！

Answer 1

依赖隐式列：

.wrapper {
  display: grid;
  height: 100px;
  width: 300px;
  grid-template-columns: 50%; /* one explicit column */
  grid-auto-columns:1fr; /* implicit column created when needed */
  grid-auto-flow:column;
  border: 1px solid black;
}

.first {
  background-color: red;
}

.first:last-child {
   grid-column:span 2; /* full width if alone */
}

.second {
  background-color: lightblue;
}

.third {
  background-color: lightgreen;
}

<div class="wrapper">
  <div class="first">
  1
  </div>
  <!--<div class="second">
  2
  </div>-->
 <!-- <div class="third">
  3
  </div> -->
</div>

<div class="wrapper">
  <div class="first">
  1
  </div>
  <div class="second">
  2
  </div>
 <!-- <div class="third">
  3
  </div> -->
</div>


<div class="wrapper">
  <div class="first">
  1
  </div>
  <div class="second">
  2
  </div>
 <div class="third">
  3
  </div> 
</div>