Почему мои строки сетки занимают 1 строку, если я установил их на 2? - PullRequest
Новая
       9

Почему мои строки сетки занимают 1 строку, если я установил их на 2?

4 голосов
/ 06 февраля 2020

У меня есть вопрос, связанный с сеткой-строкой и диапазоном в приведенном ниже коде: 

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.item {
  padding: 3rem;
  border: 1px solid #ccc;
  background: #f4f4f4;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
}

.item:first-child {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  background: blueviolet;
}

.item:nth-child(9) {
  grid-column: 2 / span 3;
  grid-row: 2 / span 2;
  background: red;
}
<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
  <div class="item">Item 13</div>
  <div class="item">Item 14</div>
  <div class="item">Item 15</div>
</div>

Вот результат?:

enter image description here

Как мы видим в на выходном скриншоте Item1 занимает только 1 строку, а item 9 - только 1 строку, но в стиле CSS я предоставил диапазон строк 2 для item1 и item9. Может кто-нибудь объяснить, пожалуйста, причину?

Ответы [ 2 ]

4 голосов
/ 06 февраля 2020

Сначала немного фона.

У вас не определены явные строки. Все строки в вашей сетке являются неявными.

Из спецификации c:

§ 7.1. Явная сетка

Три свойства grid-template-rows, grid-template-columns и grid-template-areas вместе определяют явную сетку контейнера сетки.

Другими словами, поскольку вы не используете grid-template-rows или grid-template-areas, сетка не имеет определенных строк (то есть явных строк), и строки создаются по мере необходимости (то есть неявных строк).

Продолжение из раздела spe c выше :

Окончательная сетка может в конечном итоге увеличиться из-за элементов сетки, размещенных вне явной сетки; в этом случае будут созданы неявные дорожки, размер этих неявных дорожек будет определяться свойствами grid-auto-rows и grid-auto-columns.

Хорошо, но почему расширение span 2 не происходит площадь сетки между двумя строками?

На самом деле, это так.

Ответ

У сетки spe c есть правило, которое инструктирует браузер до всегда создавайте одну линию сетки на соответствующей оси, когда grid-template-columns, grid-template-rows и grid-template-areas отсутствуют .

Снова из раздела 7.1. выше:

Если эти свойства не определяют какие-либо явные дорожки, явная сетка все еще содержит одну линию сетки на каждой оси.

Следовательно, внимательно изучите вашу сетку (в этом случае, используя Firefox инструмент Inspector ), вы обнаружите, что span 2 работает нормально, но есть дополнительная строка, которая была создана, поэтому кажется, что она дает сбой.

enter image description here

Обратите внимание, как накладываются строки строк 2 и 3.

Простым решением было бы определение высоты для неявных строк. Это переопределяет стандартную высоту auto, которая приводит к полному сворачиванию строки, когда она пуста. 

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 50px; /* new */
}

.item {
  padding: 3rem;
  border: 1px solid #ccc;
  background: #f4f4f4;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
}

.item:first-child {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  background: blueviolet;
}

.item:nth-child(9) {
  grid-column: 2 / span 3;
  grid-row: 2 / span 2;
  background: red;
}
<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
  <div class="item">Item 13</div>
  <div class="item">Item 14</div>
  <div class="item">Item 15</div>
</div>
1 голос
/ 06 февраля 2020

В вашем блоке стилей .grid вам нужно будет включить явное объявление стиля grid-template-rows.

Как только .grid явно содержит более одной строки, ваш стиль для Item 1 и Item 9 будет работать.

например, 

grid-template-rows: 1fr 1fr;

или, как @ Paulie_D предлагает: 

grid-template-rows: minmax(0, 1fr);

Рабочий пример: 

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
}

.item {
  padding: 3rem;
  border: 1px solid #ccc;
  background: #f4f4f4;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
}

.item:first-child {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
  background: blueviolet;
}

.item:nth-child(9) {
  grid-column: 2 / span 3;
  grid-row: 2 / span 2;
  background: red;
}
<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
  <div class="item">Item 13</div>
  <div class="item">Item 14</div>
  <div class="item">Item 15</div>
</div>
...