Как сделать флекс гриды максимум 3 колонки?

Question

[zyusifov11]

<div class="reactions-section_results">
<div class="reactions-section_result"></div>
<div class="reactions-section_result"></div>
<div class="reactions-section_result"></div>
</div>

.reactions-section_results {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Как сделать чтобы блоки были высотой своего контента каждый по разному?

Comments

[Ankhena]

align-items
align-self

Но строка при этом останется как была.

Если вам нужно, чтобы блоки следующей строки занимали свободное пространство, то это либо css columns либо плагины типа masonry

[WapSter]

Очевидно, что распихивать по колонкам

[zyusifov11]

WapSter, теперь так

[zyusifov11]

column-count:3

[Ankhena]

zyusifov11, display: inline-bock для детей, чтобы не было переносов посередине ребенка

[zyusifov11]

Ankhena, Спасибо большое

Answer 1

[Rsa97]

https://medium.com/@andybarefoot/a-masonry-style-l...