Расположение сетки - фиксированная ширина столбца и отзывчивый интервал сетки

Question

У меня есть макет, который заполняет все горизонтальное пространство, и элементы в последнем ряду по-прежнему имеют ту же ширину, что и другие строки благодаря компоновке сетки.

Прямо сейчас при изменении размера экрана ширина элементов изменяетсятак что весь ряд заполнен.Возможно ли, чтобы элементы были фиксированными по ширине и чтобы сеточные зазоры были теми, которые корректируются?

https://jsfiddle.net/c60ymrfu/

Текущий CSS:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

Текущийповедение:

желаемое поведение:

Answer 1

Вы можете установить фиксированную ширину элемента вместе с justify-items или place-items в зависимости от того, хотите ли вы, чтобы это происходило по одной оси или обеим:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
  place-items: center;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
  width: 100px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Answer 2

Вы можете добавить некоторые оберточные элементы и задать фиксированную ширину для элементов, например, так:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
  width: 100px;
  margin: auto;
}

<div class="container">
  <div>
    <div class="item">1</div>
  </div>
  <div>
    <div class="item">2</div>
  </div>
  <div>
    <div class="item">3</div>
  </div>
  <div>
    <div class="item">4</div>
  </div>
  <div>
    <div class="item">5</div>
  </div>
  <div>
    <div class="item">6</div>
  </div>
  <div>
    <div class="item">7</div>
  </div>
  <div>
    <div class="item">8</div>
  </div>
  <div>
    <div class="item">9</div>
  </div>
  <div>
    <div class="item">10</div>
  </div>
</div>

После этого вы можете поместить элементы в родительский элемент обертки, как считаете нужным.