Можно ли использовать grid для создания данной структуры?

Как можно реализовать верстку блоков указанных размеров с использованием grid без дополнительных оберток, чтобы HTML код оставался минимален? Или все же для этого потребуется обертка?
  • 12 мая 2024 г. 11:40
Ответы на вопрос 3
Да, можно использовать 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 строки.
Похожие вопросы