Как правильно создать блоки с разными размерами при использовании CSS Grid?

Как можно создать блоки с помощью CSS Grid, как продемонстрировано в примере?
  • 15 июня 2024 г. 13:01
Ответы на вопрос 1
Для создания блоков с разными размерами при использовании CSS Grid, можно использовать свойство grid-template-columns и grid-template-rows. 

Например, чтобы создать блоки с разными размерами, можно задать для grid-template-columns следующее значение: "repeat(3, 1fr 2fr)" - это значит, что у нас будет три колонки, в первой колонке ширина будет 1fr, во второй и третьей - 2fr.

Пример кода:

```css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr 2fr);
  grid-template-rows: repeat(3, 100px);
}

.item {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
}
```

```html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>
```

Этот код создаст блоки в виде сетки 3x3, где каждый блок будет иметь разные размеры в зависимости от заданных значений для grid-template-columns.
Похожие вопросы