Предотвращение пустых мест на четном количестве клеток

Question

Я строю макет сетки, и мне нужна помощь.Вот описание требований.

1. Каждая ячейка в сетке имеет минимальный фиксированный размер (120 пикселей).
2. Всегда будет четное количество ячеек.

Я бы хотел, чтобы сетка заполняла все пустые пространства.

Моя текущая реализация работает для контейнеров небольшого размера, но переполнение строки не работает при больших размерах.

// Cells cannot be smaller than this value.
$minimum-cell-width: 120px;

.container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($minimum-cell-width, 1fr));
  width: 600px;
}

Это дает мне сетку с 4 ячейками в первом ряду и 2 ячейками во втором ряду.Мне нужно иметь 3 ячейки в строке, чтобы заполнить все пустые места.

Я бы не стал увеличивать переменную $minimum-cell-width (хотя она и исправляет это).

См. Следующий код для получения большего количества кода и подробных примеров:

https://codepen.io/surjikal/pen/XxxgNx

Answer 1

Как элементы сетки должны знать, сколько элементов вы хотите в строке?

Все, что они знают, это то, что они не могут быть меньше ширины 120 пикселей, но могут свободно занимать свободное место (в ихtrack).

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

Компоновка работает в ваших меньших контейнерах, потому что ширинаэти контейнеры хорошо сочетаются с минимальной шириной, которую вы установили на дорожках, чтобы ограничить количество элементов в ряду равным числом.Но если вы уменьшите минимальную ширину со 120 пикселей до, скажем, 50 пикселей, вы обнаружите ту же проблему, что и у вас с большими контейнерами.

Чтобы ваш макет работал, вам нужно определитьширина контейнера (как вы уже сделали) и ширина элементов.(Вы можете сделать это без изменения переменной минимальной ширины.)

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.container-widest {
  grid-template-columns: repeat(auto-fit, minmax(120px, 25%)); /* new */
  width: 700px;
  background-color: rgba(200, 0, 0, 0.3);
}

.container-wide {
  grid-template-columns: repeat(auto-fit, minmax(120px, 200px));  /* new */
  width: 600px;
  background-color: rgba(200, 0, 0, 0.3);
}

.container-narrow {
  width: 400px;
  background-color: rgba(0, 200, 0, 0.4);
}

.container-narrower {
  width: 300px;
  background-color: rgba(0, 200, 0, 0.4);
}

/* style stuff */
html {
  padding: 20px;
  font-family: monospace;
}

.container {
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 3px;
}

.cell {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom-width: 2px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 26px;
  padding: 40px;
  text-align: center;
  font-weight: 1;
  border-radius: 3px;
}

p {
  text-align: center;
  padding-top: 50px;
}

<p>This should be 4 cells per row, to fill all blank spaces</p>
<div class="container container-widest">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
</div>

<p>This should be 3 cells per row</p>
<div class="container container-wide">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
</div>

<p>This one works great</p>
<div class="container container-narrow">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
</div>

<p>This also works great!</p>
<div class="container container-narrower">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
</div>