Как подстроить блоки по высоте?

Question

[keche]

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

Answer 1

[Миша]

Если в макете только 2 колонки, то так:

<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>

.section:nth-child(2n + 1) {
    float: left;
    clear: left;
}

.section:nth-child(2n) {
    float: right;
    clear: right;
}

Скриншот

Демо на codepen



Если колонок много, то с помощью multicolumn:

.container {
  column-width: 250px; /* Ширина колонки */
  column-gap: 10px;  /* Расстояние между колонками */
}

.item {
  break-inside: avoid; /* Запрещает разрыв блока */
}

Скриншот

Демо на codepen

Comments

[Сергей delphinpro]

break-inside в чистом виде поддерживается только в старой опере и ie10

[Миша]

Блин, как было бы круто, если бы у нас была такая штука, которая сама расставляет вендорные префиксы.

[Сергей delphinpro]

Миша: да тут дело в общем-то не в вендорных префиксах, а в том что некоторые браузеры поддерживают другие свойства с похожим поведением.

[Миша]

Сергей: например?
Поддержка браузерами - 98%

Answer 2

[Лобстер]

Masonry https://www.youtube.com/watch?v=_yTzksbNCcQ

Answer 3

[Alexander Pushkarev]

1) Через float: left (но не всегда идеально работает)
2) https://masonry.desandro.com/

Comments

[keche]

Через float: left они в таком же порядке выстраиваются, как показано на первой части картинки.

Answer 4

[kn1ght_t]

обернуть левые и правые блоки в родителя?

Comments

[keche]

И что дальше?

[kn1ght_t]

и все https://jsfiddle.net/ucmqsabj/