Для создания макета с двумя ячейками в верхнем ряду и тремя ячейками в нижнем, вы можете использовать CSS Grid Layout. Вот пример того, как это можно реализовать с помощью HTML и CSS:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Сетка</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Две колонки */
grid-template-rows: auto 1fr; /* Автоматическая высота для верхней строки и равномерная для нижней */
gap: 10px; /* Промежуток между ячейками */
height: 100vh; /* Высота контейнера */
}
.item1 {
grid-column: 1 / 3; /* Занимает две колонки */
}
.item2 {
grid-column: 1; /* Первая колонка */
}
.item3 {
grid-column: 2; /* Вторая колонка */
}
.item4 {
grid-column: 1; /* Первая ячейка нижнего ряда */
}
.item5 {
grid-column: 2; /* Вторая ячейка нижнего ряда */
}
.item6 {
grid-column: 1 / 3; /* Занимает обе колонки для третьей ячейки (нижнего ряда) */
}
.cell {
border: 1px solid #000;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="cell item1">Ячейка 1</div>
<div class="cell item2">Ячейка 2</div>
<div class="cell item3">Ячейка 3</div>
<div class="cell item4">Ячейка 4</div>
<div class="cell item5">Ячейка 5</div>
<div class="cell item6">Ячейка 6</div>
</div>
</body>
</html>
```
### Объяснение кода:
- **CSS Grid**: Используется для создания сетки. В данном случае создается две колонки в верхнем ряду и три ячейки в нижнем.
- **grid-template-columns**: Определяет, что у нас две равные колонки (1fr каждая).
- **grid-column**: Задает, какие ячейки занимают конкретные колонки. Первая ячейка занимает обе колонки, а нижние ячейки занимают каждую из колонок.
- **height: 100vh**: Устанавливает высоту контейнера равной высоте вьюпорта.
- **gap**: Устанавливает промежуток между ячейками.
Таким образом, в верхнем ряду будут две ячейки, а в нижнем - три ячейки, что соответствует вашему запросу.