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

295
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>

READ ALSO
SASS Grid Layout

SASS Grid Layout

Здравствуйте! Подскажите, что-то не могу найти, как включить в sass, чтобы он квадратные скобки нормально понимал?

300
Проблема с focus. Скрытые элементы

Проблема с focus. Скрытые элементы

Если попытаться нажать на кнопку под текстом, то теряется фокус с элемента и она просто пропадает

419
Разместить текст как в макете

Разместить текст как в макете

Здравствуйте! Как расположить текст как в макете?

257
Линия с круговым отступом

Линия с круговым отступом

Помогите разобраться, как сделано сердце с отступом вокруг негоКак получить такую же изогнутую линию? Это возможно с помощью CSS, HTML?

319