Как сделать раскладку как на Pinterest

Короткий ответ

Самый простой способ сегодня — многоколоночная раскладка: карточки идут сверху вниз и заполняют колонки без пустот:

<style>
  .wall { columns: 3 100px; column-gap: 8px; }
  .wall div { break-inside: avoid; margin-bottom: 8px; padding: 8px; background: lavender; border-radius: 8px; }
</style>
 
<div class="wall">
  <div style="height: 60px">1</div><div style="height: 100px">2</div><div style="height: 40px">3</div>
  <div style="height: 80px">4</div><div style="height: 50px">5</div><div style="height: 90px">6</div>
</div>

columns: 3 100px означает «не больше трёх колонок шириной не меньше 100px», а break-inside: avoid не даёт разрезать карточку между колонками.

Ограничение

Порядок здесь идёт по колонкам: сначала заполняется первая, потом вторая. Для галереи это неважно, а для ленты новостей, где порядок читают слева направо, такой способ не подходит.

Будущее: grid masonry

В спецификации есть настоящая раскладка masonry в grid с порядком по строкам, но поддерживают её пока не все браузеры. До тех пор используют колонки выше или небольшой скрипт.

Частая ошибка

Без break-inside: avoid карточка может начаться внизу одной колонки и продолжиться наверху следующей. А margin-bottom вместо gap нужен потому, что у колонок нет промежутков между элементами по вертикали.