Используя сетку CSS, как мне создать макет с одним столбцом, где один элемент заполняет оставшееся пространство после того, как все остальные приняли автоматическую ширину

Question

1. Я не хочу явно определять количество столбцов, поэтому я могу добавить к нему другие дочерние элементы с автоматической шириной.
2. Я не хочу использовать дополнительные оболочки.
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>