Можно ли использовать 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`. Каждый блок имеет указанный размер и позицию в сетке без использования дополнительных оберток.
Вдруг кому пригодится, реализовал решение нормальное <br/> <br/> <pre><code class="html">&lt;div class="catalog__list"&gt;
                        &lt;div class="catalog__item catalog__item_1"&gt;&lt;/div&gt;
                        &lt;div class="catalog__item catalog__item_2"&gt;&lt;/div&gt;
                        &lt;div class="catalog__item catalog__item_3"&gt;&lt;/div&gt;
                        &lt;div class="catalog__item catalog__item_4"&gt;&lt;/div&gt;
                        &lt;div class="catalog__item catalog__item_5"&gt;&lt;/div&gt;
                        &lt;div class="catalog__item catalog__item_6"&gt;&lt;/div&gt;
                    &lt;/div&gt;</code></pre> <br/> <br/> <pre><code class="css">.catalog {

    &amp;__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;
    }

    &amp;__item {
        background-color: #eee;

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

        &amp;_4 {
            grid-row: span 2; 
        }

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

}</code></pre> <br/> <br/> я пишу на SCSS но принцип если вам нужен обычный css то переписать не проблема будет.
<blockquote>Можно ли сверстать блоки такого вида на grid? чтоб html верстка была без доп оберток а просто</blockquote> <br/> Можно, в 3 колонки и 4 строки.
Похожие вопросы