Авто равномерно распределить столбцы с CSS сеткой

Question

Как я могу равномерно распределить x количество элементов в столбцах.Так, например, если у меня есть этот код

div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 0.5rem;
}

span {
  background: red;
  height: 50px;
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Я хочу, чтобы он подходил равномерно.Поэтому он никогда не должен показывать 3 элемента в первом ряду и 1 элемент во втором ряду.Вместо этого он должен показывать 2 элемента на первом и 2 на втором.Пока он может распределять его равномерно по каждому ряду, он должен это делать.

Я сделал фрагмент, который почти все делает.Проблема в том, что когда экран действительно маленький, на первом показывается 3, а на втором - 1.Обратите внимание, что теперь у меня есть только 4 предмета, но он должен динамически работать с любым количеством предметов.

Answer 1

Я думаю, что хороший и простой вариант - просто указать количество столбцов для небольших экранов;правило auto-fit не позволит вам указать минимальное или максимальное количество столбцов и будет просто корректировать их при наличии свободного места.

div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 0.5rem;
}

span {
  background: red;
  height: 50px;
}

@media (max-width: 500px) {
  div {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }
}

<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>