Почему блоки не работают с сеткой-шаблоном-строкой на сетке CSS? - PullRequest
Новая
       7

Почему блоки не работают с сеткой-шаблоном-строкой на сетке CSS?

3 голосов
/ 31 марта 2020

Я не могу заставить grid-template-rows работать с fr единицами. Я могу заставить высоту строки меняться с другими единицами, такими как пиксели, но не с fr единицами.

Я не понимаю, почему это не работает, поскольку fr устройства работают с grid-template-columns. 

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  text-align: center;
}
<div class="grid-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 class="item"> 11 </div>
  <div class="item"> 12 </div>
  <div class="item"> 13 </div>
  <div class="item"> 14 </div>
  <div class="item"> 15 </div>
  <div class="item"> 16 </div>
  <div class="item"> 17 </div>
  <div class="item"> 18 </div>
  <div class="item"> 19 </div>
  <div class="item"> 20 </div>
  <div class="item"> 21 </div>
  <div class="item"> 22 </div>
  <div class="item"> 23 </div>
  <div class="item"> 24 </div>
  <div class="item"> 25 </div>
  <div class="item"> 26 </div>
  <div class="item"> 27 </div>
  <div class="item"> 28 </div>
  <div class="item"> 29 </div>
  <div class="item"> 30 </div>
</div>

Это шаблон для иллюстрации результата.

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

What I expect with the CSS grid

1 Ответ

3 голосов
/ 31 марта 2020

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

Установите высоту для контейнера (например, height: 100vh). 

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  text-align: center;
  height: 100vh; /* new */
}

body {
  margin: 0;
}
<div class="grid-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 class="item"> 11 </div>
  <div class="item"> 12 </div>
  <div class="item"> 13 </div>
  <div class="item"> 14 </div>
  <div class="item"> 15 </div>
  <div class="item"> 16 </div>
  <div class="item"> 17 </div>
  <div class="item"> 18 </div>
  <div class="item"> 19 </div>
  <div class="item"> 20 </div>
  <div class="item"> 21 </div>
  <div class="item"> 22 </div>
  <div class="item"> 23 </div>
  <div class="item"> 24 </div>
  <div class="item"> 25 </div>
  <div class="item"> 26 </div>
  <div class="item"> 27 </div>
  <div class="item"> 28 </div>
  <div class="item"> 29 </div>
  <div class="item"> 30 </div>
</div>

Я не понимаю, почему это не работает, так как блоки fr работают с grid-template-columns.

По умолчанию блочные элементы занимают всю ширину родительского элемента. Так что вам не нужно определять width: 100%.

Не так с высотой. Большинство элементов по умолчанию установлены на высоту их содержимого (height: auto). Поэтому вам нужно определить высоту, если вы хотите, чтобы контейнер был выше содержимого.

Именно поэтому fr блоки работали с grid-template-columns, но не grid-template-rows.

...