Как отменить обрезание и перенесение блока при использовании css columns?

Question

[ravshan selimov]

Хочу сделать типа масонри сетку(без библиотек).
Использую css columns но он обрезает блоки и переносит их


разметка

<div class="posts" > 
  <div class="post">...</div>
  <div class="post">...</div>
  ...
  <div class="post">...</div>
  <div class="post">...</div>
</div>

стили

.posts{
  columns: 300px auto;
  width: 100%;
  max-width: 100%;
}
.post{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

высоту делаю рандомно на js.
Если можно сделать на css grid, как ме сделать

Comments

[Rustam Bainazarov]

А где у вас, собственно, columns? У вас же flex.

[ravshan selimov]

Рустам Байназаров, columns на контейнере .posts