使用CSS网格，我如何做一个单列布局，在所有其他元素都采用自动宽度后，一个元素填充剩余的空间。

Question

1. 我不想明确定义列数，这样我就可以在以后添加其他自动宽度的子代。
2. 我不想使用额外的包装器，我想在CSS网格中做，而不是在flexbox中做（我可以在flexbox中用包装器做）。
3. 我想在CSS网格中做，而不是在flexbox中做（我可以在flexbox中用包装器做。

4. 如果你想知道它是一个导航栏的布局。

   以下是我想实现的目标

.container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 5px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.item--1,
.item--3 {
  grid-column: 1fr;
  width: 100px;
}

.item--2 {
  color: #fff;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
}

.item {
  height: 100px;
  background: deepskyblue;
}

@media screen and (max-width: 768px) {
  .container-1 {
    grid-template-rows: auto auto;
  }
  .item--1 {
    grid-column: 1 / 2;
  }
  .item--2 {
    grid-row-start: 2;
    grid-column: 1 / -1;
  }
  .item--3 {
    grid-column: 3 / 4;
  }
}

<div class="container">
  <div class="item item--1"></div>
  <div class="item item--2">Fill up remaining space</div>
  <div class="item item--3"></div>
</div>

Answer 1

这里有一个使用flexbox的想法，但没有额外的包装器。

.container {
  display: flex;
  grid-gap: 5px;
  margin-bottom: 10px;
}

/* this is your gap */
.item:not(:last-child) {
  margin-right: 5px;
}
/**/

.fill {
  color: #fff;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  flex-grow: 1; /* fill the remaining space */
}

.item {
  height: 100px;
  width: 100px;
  background: deepskyblue;
  margin-bottom: 5px;
}

@media screen and (max-width: 768px) {
  .container {
    flex-wrap: wrap; /* allow the wrap */
  }
  .fill {
    order: 2; /* make the element the last on*/
    flex-basis: 100%; /* 100% width */
    margin-right: 0!important;
  }
  .fill + * {
    margin-left: auto; /* keep the element on the left */
  }
}

<div class="container">
  <div class="item"></div>
  <div class="item fill">Fill up remaining space</div>
  <div class="item"></div>
  <div class="item"></div>
</div>