Как сделать сложную несимметричную grid-сетку (см.фото)?

Для создания сложной и несимметричной grid-сетки в HTML и CSS можно использовать flexbox или grid layout. В данном случае предлагаю использовать grid layout, так как он предоставляет более широкие возможности по управлению размещением элементов.

Прежде всего, создадим HTML структуру для нашей grid-сетки. Ниже приведен пример HTML разметки с использованием div элементов:

<div class="grid-container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
</div>

Теперь перейдем к стилям CSS. Применим grid layout к нашей grid-сетке:

.grid-container {
    display: grid;
    grid-template-rows: 100px 150px 80px;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px;
}

.item1 {
    grid-row: 1 / 3;
    grid-column: 1 / 3;
}

.item2 {
    grid-row: 1 / 4;
    grid-column: 3 / 4;
}

.item3 {
    grid-row: 2 / 4;
    grid-column: 1 / 2;
}

.item4 {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}

.item5 {
    grid-row: 3 / 4;
    grid-column: 3 / 4;
}

.item6 {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

Здесь мы определили grid контейнер с тремя строками и тремя столбцами, а затем задали позиции каждому из элементов в сетке при помощи grid-row и grid-column.

Таким образом, если применить данные стили к нашей HTML разметке, мы получим сложную и несимметричную grid-сетку, как на фото.

Помните, что grid layout предоставляет огромные возможности для создания разнообразных и сложных сеток, поэтому экспериментируйте с параметрами и смотрите, как они влияют на внешний вид вашей сетки.