7

.box {
  width: 160px;
  height: 160px;
  border: 1px solid black;
}

.big {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: red;
}

.small {
  width: 50px;
  height: 50px;
  display: inline-block;
  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>

2 ответа 2

6

Можно добавить обтекание float: left для большого квадрата

.box {
  width: 160px;
  height: 160px;
  border: 1px solid black;
}

.big {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: red;
  float: left;
  margin:  0 4px;
}

.small {
  width: 50px;
  height: 50px;
  display: inline-block;
  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>

UPD: Можно добавить еще margin для ровных отступов.

1
  • @Cristian тогда отметьте как принятый
    – webDev_
    Commented 27 июл. 2017 в 11:47
6

Можно для такого рода разметки использовать 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.