Элемент сетки не охватывает как указано - PullRequest
Новая
       5

Элемент сетки не охватывает как указано

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

Я пытаюсь сделать элемент сетки (.item3) полностью поперечным и на 3 строки вниз. После расширения столбца он не будет занимать строки. Но если я увеличу значение диапазона строки до 4, это сработает. Однако охват составляет только 2 строки вместо 4. Вот код. 

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
}

.item {
  display: grid;
  border-radius: 2px;
  border: 1px solid red;
  background-color: var(--yellow);
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

Ответы [ 3 ]

3 голосов
/ 22 февраля 2020

В этом макете происходит много .

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

Вот что происходит :

Явные и неявные строки

Вот что у вас есть: 

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
}

.item {
   display: grid;
   border-radius: 2px;
   border: 1px solid red;
   background-color: var(--yellow);
}

.item3 {
   grid-column: 1 / -1;
   grid-row: span 3;
}

Правило .item не оказывает влияния на проблему, поэтому давайте просто оставьте границы для иллюстрации. 

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
}

.item3 {
   grid-column: 1 / -1;
   grid-row: span 3;
}

.item {
  border: 1px solid red;
}

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

Размер неявных строк регулируется grid-auto-rows, значение по умолчанию которого auto (размер содержимого).

Таким образом, высота каждой строки в настоящее время определяется размером текста - цифрами - в вашем HTML.

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

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
   color: white; /* new */
}

Вот полный код: 

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

Как указано выше, высота неявных строк по умолчанию равна auto. Это означает, что если grid-auto-rows не указано и в элементах сетки нет содержимого, строки будут свернуты: 

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
  <div class="item item7"></div>
  <div class="item item8"></div>
  <div class="item item9"></div>
  <div class="item item10"></div>
</div>

Оставшаяся высота в контейнере определяется толщиной границы и зазорами сетки 10px. Удалите их для полного коллапса (сетка исчезает). 

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* grid-gap: 10px; */
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  /* border: 1px solid red; */
}
<div class="container">
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
  <div class="item item7"></div>
  <div class="item item8"></div>
  <div class="item item9"></div>
  <div class="item item10"></div>
</div>

Проблема пункта 3 

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

Когда вы даете команду item3 охватить три строки, это не охватывают три существующих ряда, потому что эти дорожки уже заняты. Однако если вы удалите команду grid-column, то span 3 будет работать. 

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  /* grid-column: 1 / -1; */
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

Давайте go вернемся к моей первой строке на минуту: "Когда вы командуете item3, чтобы охватить три строки, это не так" пересекают две другие строки, потому что эти дорожки уже заняты. "

Это правда. Но также верно, что две новые строки созданы . Сетка просто подразделяет первый ряд на три.

Вот как это выглядит с помощью Firefox Инспектора сетки :

enter image description here

Обратите внимание, как первая строка была разделена на три, и теперь сетка имеет в общей сложности пять строк (потому что span 3 = существующая строка + 2).

Давайте сделаем это grid-row: span 10 для лучшего взгляда:

enter image description here

Высота подразделенного первого ряда целиком исходит от grid-gap, который добавляет 10px между каждым новый ряд

Кстати, вот объяснение этой части вашего вопроса:

Если я увеличу значение диапазона строки до 4, это сработает , Однако охват составляет всего 2 строки вместо 4.

На самом деле вы просто видите эффект наложения разрыва строк в 10 пикселей.

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

Вот тот же макет с span 10 снова и без grid-gap:

enter image description here

Решения

Вот три способа решения проблемы.

1. Дайте контейнеру некоторую высоту.

Если вы предоставите контейнеру дополнительную высоту - то есть большую высоту, чем необходимо для содержимого - у grid-row: span 3 будет достаточно места для работы. 

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
  height: 250px; /* new */
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

2. Определите grid-auto-rows.

Если вы установите высоту grid-auto-rows, которая контролирует высоту неявных строк, то grid-row: span 3 также будет работать. 

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 50px; /* new */
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

3. Определите grid-template-rows.

Если вы знаете, сколько строк вы хотите в контейнере, установите число и высоту равными grid-template-rows, которые управляют высотой явных строк. 

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 50px); /* new */
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>
2 голосов
/ 22 февраля 2020

Ваш код не имеет определения для строк. Как только вы добавите это, вы увидите, что промежуток явно делает то, что можно ожидать.

До этого ваши виртуальные строки как бы сворачивались, потому что сами по себе не имели контента, и им был задан размер по умолчанию, равный auto. 

grid-template-rows: repeat(5, 24px);


.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 24px);
  grid-gap: 10px;
  background: black;
}

.item {
  display: grid;
  border-radius: 2px;
  border: 1px solid red;
  background-color: var(--yellow);
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

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

0 голосов
/ 22 февраля 2020

Вам необходимо предоставить информацию о том, как сетка выглядит в терминах строк.

Без grid-template-rows, установленного для родительского элемента, grid-row: span 3 для дочернего элемента будет рассчитываться на неявной сетке и будет иметь автоматический размер по умолчанию (в измерении высоты).

Установка grid-template-rows создает явную сетку . 

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 20px);
  grid-gap: 10px;
  background: black;
}

.item {
  display: grid;
  border-radius: 2px;
  border: 1px solid red;
  background-color: var(--yellow);
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>
...