Как можно реализовать верстку блоков указанных размеров с использованием grid без дополнительных оберток, чтобы HTML код оставался минимален? Или все же для этого потребуется обертка?
Да, можно использовать grid для создания данной структуры блоков указанных размеров. Для этого не обязательно использовать дополнительные обертки. Пример реализации верстки с использованием grid без дополнительных оберток: ```html <div class="grid-container"> <div class="block a">1</div> <div class="block b">2</div> <div class="block c">3</div> <div class="block d">4</div> </div> ``` ```css .grid-container { display: grid; grid-template-columns: 50px 100px; grid-template-rows: 50px 100px; gap: 10px; } .block { display: flex; justify-content: center; align-items: center; } .a { grid-column: 1 / span 2; grid-row: 1; } .b { grid-column: 1; grid-row: 2; } .c { grid-column: 2; grid-row: 2; } .d { grid-column: 1 / span 2; grid-row: 3; } ``` В данном примере мы задали контейнеру `.grid-container` свойства grid и разместили в нем блоки с помощью свойств `grid-column` и `grid-row`. Каждый блок имеет указанный размер и позицию в сетке без использования дополнительных оберток.
Вдруг кому пригодится, реализовал решение нормальное
<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 то переписать не проблема будет.
Можно ли сверстать блоки такого вида на grid? чтоб html верстка была без доп оберток а просто
Можно, в 3 колонки и 4 строки.