Как сделать grid с разной высотой блоков в строке?

Question

[denism300]

Пытаюсь сделать, чтобы было так:

но не получается. Помогите, плз...

Пример верстки: https://codepen.io/denism300/pen/wBwaexg

Comments

[Tishaa]

посмотри ответ

Answer 1

[Tishaa]

изучай
HTML

<div class="wrap">
        <div class="item item-1"></div>
        <div class="item item-2"></div>
        <div class="item item-3"></div>
        <div class="item item-4"></div>
      </div>

css

.wrap{
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 20px 100px;
    height: 500px;
    gap: 5px;
}

.item-1 {
    background-color: aqua;
    width: 100%;
    height: 100%;
    grid-row: 1 / 2;
}

.item-2 {
    background-color: rgb(26, 141, 72);
    width: 100%;
    height: 100%;
    grid-row: 1 / 3;
}
.item-3 {
    background-color: blueviolet;
    width: 100%;
    height: 100%;
    grid-row: 2 / 4;
}
.item-4 {
    background-color: rgb(188, 104, 24);
    width: 100%;
    height: 100%;
    grid-row: 3 / 4;
}

Answer 2

[Ivan Ustûžanin]

полноценно пока никак, даже спецификация нативного masonry не готова, но какие-то реализации есть в браузерах за флагами
остаётся только:
1) хаками с прибитыми гвоздями высотами элементов в строках грида
2) через js библиотеки
3) через columns: 2; на контейнер и break-inside: avoid; на элементы, но порядок элементов будет другой

Answer 3

[Александр Синицын]

Так понимаю, тебе в этом направлении
https://www.freecodecamp.org/news/how-to-create-a-...

Answer 4

[Иван Мусинский]

Масонри эфект средствами html и css
https://www.smashingmagazine.com/2020/11/native-cs...