Предотвратить "вдовы" - элементы одни в ряду - при использовании сетки css

Question

Я создал адаптивную сетку, которая должна содержать строки из 4, 3, 2 или 1 элемента, в зависимости от размера окна. Жесткое требование от Design состоит в том, что не допускаются вдовы и наполовину заполненные строки. Итак, для 11 элементов может быть две строки по четыре элемента и одна из трех, или три строки по три элемента и одна из двух элементов, или ... Вы уловили идею.

Чтобы решить эту проблему, я создал css сетку :

display: grid;
grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
grid-gap: 24px;

Это отлично работает для изменения размера, но не позаботьтесь о проблеме вдовы. Сначала я применил наивный подход, выбрав последний элемент с помощью селектора last-of-type и придав ему стиль grid-row: 1 / -1, но это не гарантирует, что строка выше будет полностью заполнена.

Я думаю, что выиграл Это не единственное решение css. Есть ли способ для элемента понять, что он один в строке или что он должен расти, чтобы заполнить строку? У меня была идея использовать свойство nextSibling, чтобы выбрать последнего дочернего элемента через JavaScript и, возможно, определить по смещению страницы, заполняет ли он всю строку. Но моя проблема в том, что я не могу жестко запрограммировать ширину экрана.

В качестве альтернативы, есть ли способ указать элементу распространяться до конца строки? Я пробовал это, но это не сработало:

.card:last-of-type {
  grid-column-end: span -1;
}

Щелкните здесь , чтобы просмотреть минимальный воспроизводимый пример.

Answer 1

Решение - использовать flexbox вместо grid . Таким образом, он может растягиваться по размеру экрана. Мы используем 25% для макета из 4 столбцов. Вычитая 1rem для небольшого запаса. (0,5 слева + 0,5 справа)

(Откройте фрагмент в полноэкранном режиме, чтобы увидеть, как он работает)

.my-grid {
  display: flex;
  flex-wrap: wrap;
}

.card {
  min-width: 264px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 1px #00000026;
  font-size: 14px;
  background-color: red;
  margin: .5rem;
  flex: 1 1 calc(25% - 1rem);
}

<div class="my-grid">
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">1</div>
  <div class="card">blub</div>
</div>