Можно ли сверстать такую структуру на grid?

Question

[Артем Колчин]

Можно ли сверстать блоки такого вида на grid? чтоб html верстка была без доп оберток а просто

<div class="list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

размеры элементов
393px 393px
393px 810px
810px 810px
1230px 393px

Или уже не выдумывать и обертку делать?

Answer 1

[Артем Колчин]

Вдруг кому пригодится, реализовал решение нормальное

<div class="catalog__list">
                        <div class="catalog__item catalog__item_1"></div>
                        <div class="catalog__item catalog__item_2"></div>
                        <div class="catalog__item catalog__item_3"></div>
                        <div class="catalog__item catalog__item_4"></div>
                        <div class="catalog__item catalog__item_5"></div>
                        <div class="catalog__item catalog__item_6"></div>
                    </div>

.catalog {

    &__list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(toRem(393), 1fr));
        grid-column-gap: toRem(25);
        grid-row-gap: toRem(25);
        grid-auto-rows: toRem(393);
        grid-auto-flow: dense;
    }

    &__item {
        background-color: #eee;

        &_1, &_5 {
            grid-column: span 2; 
            grid-row: span 2;
        }

        &_4 {
            grid-row: span 2; 
        }

        &_6 {
            grid-column: span 3;   
        }
    }

}

я пишу на SCSS но принцип если вам нужен обычный css то переписать не проблема будет.

Answer 2

[Михаил Р.]

Можно ли сверстать блоки такого вида на grid? чтоб html верстка была без доп оберток а просто

Можно, в 3 колонки и 4 строки.