Можно для такого рода разметки использовать CSS Grid layout:
.box {
border: 1px solid black;
/* задаём grid-контейнер, который не будет растягиваться на всю ширину строки */
display: inline-grid;
/* задаём 3 столбца по 50px */
grid-template-columns: repeat(3, 50px);
/* задаём 3 строки по 50px */
grid-template-rows: repeat(3, 50px);
/* задаём отступы между строками и стобцами в 5px */
grid-gap: 5px;
}
.big {
background: red;
/* данный элемент будет растягиваться на 2 стобца */
grid-column: span 2;
/* данный элемент будет растягиваться на 2 строки */
grid-row: span 2;
}
.small {
background: #000;
}
<div class="box">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="big"></div>
<div class="small"></div>
<div class="small"></div>
</div>
Чтобы данная разметка работала в IE10+ следует использовать старый синтаксис. Это значит, что надо задавать положение каждой клетки вручную (иначе элементы наложатся друг на дружку в первой клетке) и эмулировать отступы между клетками дополнительными строками и столбцами (так как IE не поддерживает grid-gap
), также в IE не работает функция repeat
. Для демонстрации я использовал подобные свойства в старой и новой спецификациях CSS Grid Layout для разных браузеров, чтобы было легче сопровождать код. Не задавал значения -ms-grid-row: 1
и -ms-grid-column: 1
, так как это значения по умолчанию. Демонстрация:
.box {
border: 1px solid black;
display: -ms-inline-grid;
display: inline-grid;
-ms-grid-columns: 50px 5px 50px 5px 50px;
grid-template-columns: 50px 5px 50px 5px 50px;
-ms-grid-rows: 50px 5px 50px 5px 50px;
grid-template-rows: 50px 5px 50px 5px 50px;
}
.big {
background: red;
-ms-grid-column-span: 3;
grid-column: 1 / span 3;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
grid-row: 3 / span 3;
}
.small {
background: #000;
}
.small:nth-child(2) {
-ms-grid-column: 3;
grid-column: 3;
}
.small:nth-child(3) {
-ms-grid-column: 5;
grid-column: 5;
}
.small:nth-child(5) {
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 3;
grid-row: 3;
}
.small:nth-child(6) {
-ms-grid-column: 5;
grid-column: 5;
-ms-grid-row: 5;
grid-row: 5;
}
<div class="box">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="big"></div>
<div class="small"></div>
<div class="small"></div>
</div>