Как реализовать упаковку новых блоков разной высоты? - PullRequest
Новая
       24

Как реализовать упаковку новых блоков разной высоты?

0 голосов
/ 26 апреля 2018

У меня интересный случай положения блока. Пожалуйста, дайте мне несколько советов, как это осуществить.

Для этого HTML 

<div class="container">
  <div class="item grey">1</div>
  <div class="item purple" style="height: 150px;">2</div>
  <div class="item blue">3</div>
  <div class="item blue">4</div>
  <div class="item blue">5</div>
  <div class="item blue">6</div>
  <div class="item blue">7</div>
  <div class="item blue">8</div>
  <div class="item purple">9</div>
  <div class="item purple"></div>
</div>

Я хочу получить такой результат:

expected result

Я уже пробовал встроенные блоки jsfiddle-code и получил это:

inline-block-result-image

и flex jsfiddle-code - получил:

flex-result-image

1 Ответ

0 голосов
/ 26 апреля 2018

Как насчет использования решения CSS Grid? Я новичок в CSS Grid, поэтому не уверен на 100%, что нет даже лучшего способа сделать это.

CSS Grid великолепен, потому что он позволяет вам создавать пользовательские контейнеры сетки в вашем проекте и дает вам больший контроль над размером и выравниванием строк и столбцов в сетке. В этом примере, используя grid-template-columns и grid-template-rows, вы можете определить начальное расположение линий сетки, как по вертикали, так и по горизонтали. Вы можете дополнительно настроить свойства каждого grid-item, что в вашем случае было сделано для того второго div (.item:nth-child(2)), который требовал вдвое больше высоты всех остальных элементов сетки.

Проверьте эту ссылку и эту ссылку для получения дополнительной информации.

Кроме того, как примечание, вы можете комбинировать Flexbox и CSS Grid для еще большей гибкости с вашим макетом. 

.container {
  display: grid;
  grid-template-columns: 75px 75px 75px 75px;
  grid-template-rows: 75px 75px 75px;
}
 
.item {
  border: 1px solid black;
}

.item:nth-child(2) {
  -ms-grid-row: 1 / 3 ;
  grid-row: 1 / 3;
  -ms-grid-column: 2 / 3;
  grid-column: 2 / 3;
}
<div class="container">
  <div class="item grey">1</div>
  <div class="item purple">2</div>
  <div class="item blue">3</div>
  <div class="item blue">4</div>
  <div class="item blue">5</div>
  <div class="item blue">6</div>
  <div class="item blue">7</div>
  <div class="item blue">8</div>
  <div class="item purple">9</div>
</div>
...