Как сделать такой layout?

301

12 июня 2017, 21:46

Используя flexbox, display: inline-block, блоки выглядели вот так:

Как решить?

Answer 1

Как вариант

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
body { 
  padding-top: 100px; 
} 
 
.container { 
  columns: 4; 
  column-gap: 10px; 
  padding: 15px; 
} 
 
.item { 
  min-height: 50px; 
  border: 1px solid #ccc; 
  padding: 15px; 
  margin: 0 0 10px; 
  -webkit-column-break-inside: avoid; 
  page-break-inside: avoid; 
  break-inside: avoid-column; 
} 
 
.item:nth-of-type(1), 
.item:nth-of-type(4), 
.item:nth-of-type(9) { 
  height: 110px; 
}

<div class="container"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>