Заполнение больших промежутков между рядами - PullRequest
Новая
       11

Заполнение больших промежутков между рядами

2 голосов
/ 11 апреля 2020

В коде box-2 и box-3 высота строки автоматически растягивается до box-1 высоты, которая является самым высоким элементом в ряду. В столбцах box-2 и box-3 имеется дополнительный пробел. Я хочу, чтобы этот пробел был заполнен box-5, который находится во втором ряду. Скрипка 

.container {
  display: grid;
  grid-template-columns: 20% 40% 40%;
  grid-gap: 20px;
}

.container > div {
  border: 1px solid red;
}

.box-1 {
  background-color: lightgreen;
  height: 300px;
}

.box-2 {
  background-color: lightsalmon;
  height: 150px;
}

.box-3 {
  background-color: lightsalmon;
  height: 150px;
}

.box-4 {
  background-color: lightskyblue;
  height: 500px;
}

.box-5 {
  background-color: lightseagreen;
  grid-column: 2/-1;
}
<div class="container">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4"></div>
  <div class="box-5"></div>
</div>

Это вывод, который я ищу

This is the output I am looking for

Ответы [ 2 ]

1 голос
/ 11 апреля 2020

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

Требуемый макет требует не менее трех рядов.

Попробуйте это подход: установите строки (и высоту) на уровне контейнера, затем установите области сетки. 

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  grid-template-rows: repeat(3, 150px);
  grid-gap: 10px;
}

.box-1 {
  grid-column: 1;
  grid-row: 1 / span 2;
  background-color: lightgreen;
}

.box-2 {
  grid-column: 2;
  grid-row: 1;
  background-color: lightsalmon;
}

.box-3 {
  grid-column: 3;
  grid-row: 1;
  background-color: lightsalmon;
}

.box-4 {
  grid-column: 2 / -1;
  grid-row: 2 / 4;
  background-color: lightskyblue;
}

.box-5 {
  grid-column: 1;
  grid-row: 3;
  background-color: lightseagreen;
}
<div class="container">
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
  <div class="box-4">4</div>
  <div class="box-5">5</div>
</div>

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

Для Например, вместо этого: 

grid-template-rows: repeat(3, 150px)

... вы можете сделать это: 

grid-template-rows: repeat(9, 50px)

... затем распределить области сетки по строкам по мере необходимости.

0 голосов
/ 11 апреля 2020

Держите коробку 1 и коробку 3 в одном делении, выровняйте их по вертикали и оставьте все остальные 3 коробки в одном контейнере в 1 контейнере, чтобы вы могли легко это сделать

...