Как достичь строки сетки с более чем одним элементом по вертикали? - PullRequest
Новая
       22

Как достичь строки сетки с более чем одним элементом по вертикали?

1 голос
/ 15 апреля 2019

У меня есть сетка с двумя столбцами, которая содержит поля высот X и 2X ( fiddle , скриншот ниже)

В поле номер два под пустым пространством достаточно места, чтобы поместиться в поле 3:

ex

Я хочу знать, возможно ли поместить карту 3 в это пустое место (и пусть карта 4 занимает место карты 3, а карта 5 занимает место карты 4)

Я попытался использовать этот макет с помощью flex, но я достиг такой же ситуации. 

.boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.smallbox {
  border: 2px solid black;
  padding: 1em;
  height: 50px;
}

.bigbox {
  border: 1px solid black;
  padding: 1em;
  background: red;
  height: 150px;
}
<div class="boxes">
  <div class="bigbox">1</div>
  <div class="smallbox">2</div>
  <div class="smallbox">3</div>
  <div class="smallbox">4</div>
  <div class="smallbox">5</div>
</div>

1 Ответ

1 голос
/ 15 апреля 2019

Не устанавливайте высоту для самих элементов сетки.

Используйте grid-auto-rows на уровне контейнера, затем span для областей сетки. 

.boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px; /* new */
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

.smallbox {
  grid-row: span 1; /* new */
  border: 2px solid black;
  padding: 1em;
}

.bigbox {
  grid-row: span 3; /* new */
  border: 1px solid black;
  padding: 1em;
  background: red;
}
<div class="boxes">
  <div class="bigbox">1</div>
  <div class="smallbox">2</div>
  <div class="smallbox">3</div>
  <div class="smallbox">4</div>
  <div class="smallbox">5</div>
</div>
...