Создание нестандартной сетки для блока в вёрстке может быть выполнено с использованием разных подходов. Один из самых популярных способов — использование CSS Grid или Flexbox. Ниже приведу пример создания нестандартной сетки с помощью CSS Grid.
### Пример: Использование CSS Grid
Предположим, вы хотите создать блок с тремя колонками и двумя строками, но с разной шириной и высотой. Вот пример HTML и CSS:
#### HTML
```html
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item item2">2</div>
<div class="grid-item item3">3</div>
<div class="grid-item item4">4</div>
<div class="grid-item item5">5</div>
<div class="grid-item item6">6</div>
</div>
```
#### CSS
```css
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Создаем 3 колонки */
grid-template-rows: 100px 200px; /* Высоты строк */
gap: 10px; /* Заствка между элементами */
}
.grid-item {
background-color: #4CAF50;
color: white;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid white;
}
.item1 {
grid-column: span 2; /* Этот элемент занимает 2 колонки */
grid-row: span 1; /* Этот элемент занимает 1 строку */
}
.item2 {
grid-column: span 1; /* Этот элемент занимает 1 колонку */
grid-row: span 1; /* Этот элемент занимает 1 строку */
}
.item3 {
grid-column: span 1; /* Этот элемент занимает 1 колонку */
grid-row: span 2; /* Этот элемент занимает 2 строки */
}
.item4 {
grid-column: span 1; /* Этот элемент занимает 1 колонку */
grid-row: span 1; /* Этот элемент занимает 1 строку */
}
.item5 {
grid-column: span 1; /* Этот элемент занимает 1 колонку */
grid-row: span 1; /* Этот элемент занимает 1 строку */
}
.item6 {
grid-column: span 3; /* Этот элемент занимает 3 колонки */
grid-row: span 1; /* Этот элемент занимает 1 строку */
}
```
### Объяснение
1. **grid-template-columns**: Устанавливает количество и ширину колонок. В примере у нас 3 колонки, каждая шириной 1fr (fraction unit).
2. **grid-template-rows**: Определяет высоту строк.
3. **gap**: Задает промежутки между ячейками сетки.
4. **grid-column** и **grid-row**: Позволяют контролировать, сколько колонок и строк занимает каждый элемент.
### Пример на Flexbox
Если вы хотите использовать Flexbox, вот пример, как это можно сделать:
#### HTML
```html
<div class="flex-container">
<div class="flex-item item1">1</div>
<div class="flex-item item2">2</div>
<div class="flex-item item3">3</div>
<div class="flex-item item4">4</div>
<div class="flex-item item5">5</div>
<div class="flex-item item6">6</div>
</div>
```
#### CSS
```css
.flex-container {
display: flex;
flex-wrap: wrap; /* Позволяет элементам обтекать */
}
.flex-item {
background-color: #4CAF50;
color: white;
display: flex;
justify-content: center;
align-items: center;
width: calc(33.33% - 10px); /* Ширина элементов */
margin: 5px; /* Отступ между элементами */
}
.item1 {
flex-basis: 66.66%; /* Занимает 2 колонки */
}
.item3 {
flex-basis: 100%; /* Занимает всю ширину */
}
```
В данном примере с Flexbox каждый элемент задается шириной и может обтекать. Определять высоту элементов вы можете через `flex-grow`, но имейте в виду, что Flexbox не предназначен для создания сложных сеток.
Вы можете выбирать между CSS Grid и Flexbox в зависимости от вашей задачи. CSS Grid лучше подходит для создания сеток, в то время как Flexbox