Сделайте div div двумя строками в сетке

У меня есть страница с блоками, которые накапливаются с помощью display: inline-block. Я хочу сделать примерно в четыре или два раза больше, поэтому я использовал float: left или right для размещения других блоков.

Моя проблема в том, что у меня есть пятиэлементная строка, как я могу разместить более высокий элемент в середине? (как float положите его естественно сбоку).

Вот пример фрагмента:

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Ответ 1

У вас установлены фиксированные высоты на дочерних элементах (.block). Исходя из этой информации, мы можем экстраполировать высоту контейнера (#wrapper).

Зная высоту контейнера, ваш макет может быть достигнут с помощью CSS Flexbox с flex-direction: column и flex-wrap: wrap.

Фиксированная высота на контейнере служит в качестве точки останова, указывающая на гибкие элементы, где их можно обернуть.

#wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
  width: 516px;
}
.block {
  width: 90px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: red;
}
.bigger {
  flex-basis: 110px;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Ответ 2

Чтобы ваш макет работал с flexbox, вам нужно использовать вложенные контейнеры или узнать высоту контейнера (см. мой другой ответ на этой странице). Не так с сеткой. Структура кода очень проста.

#wrapper {
  display: grid;                                     /* 1 */
  grid-template-columns: repeat(5, 90px);            /* 2 */
  grid-auto-rows: 50px;                              /* 3 */
  grid-gap: 10px;                                    /* 4 */
  width: 516px;
}
.bigger {
  grid-row: 1 / 3;                                   /* 5 */
  grid-column: 2 / 3;                                /* 6 */
}
.block {
  background-color: red;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>