Почему элементы CSS Grid не переносятся, если контейнер не имеет определенной высоты? - PullRequest
Новая
       17

Почему элементы CSS Grid не переносятся, если контейнер не имеет определенной высоты?

1 голос
/ 07 марта 2019

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

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

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

Ниже приведен фрагмент кода.

Элементы сетки никогда не переносятся.если вы не раскомментируете правило height для контейнера, но я хочу, чтобы контейнер увеличивался / уменьшался, чтобы соответствовать размеру сетки. 

.box {
  height: 150px;
  width: 150px;
  background-color: red;
}

.container {
  width: 500px;
  /*   height: 500px; */
  background-color: blue;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-rows: repeat(auto-fill, minmax(150px, 1fr));
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

1 Ответ

2 голосов
/ 07 марта 2019

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

Тогда почему вы используете grid-auto-flow: column и grid-template-rows?

При grid-auto-flow: column элементы сетки будут перетекать вертикально, заполняя строки и создавая новые столбцы.Вы говорите, что хотите наоборот: заполните столбцы, затем создайте новые строки.Поэтому придерживайтесь значения по умолчанию: grid-auto-flow: row.

В том же ключе переключитесь с grid-template-rows на grid-template columns.Вы хотите автоматически заполнять столбцы, а не строки.

Высота не требуется для контейнера сетки.

На самом деле вам не нужны ни ширина, ни высота для элементов. 

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 150px;
  grid-gap: 5px;
  width: 500px;
  background-color: blue;
}

.box {
  background-color: red;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Подробнее: Сделать контейнер сетки заполнять столбцы, а не строки

...