Как сверстать такой блок?

Question

[Алексей]

Блок выглядит следующим образом, получилось сделать через flex, что-то похожее но при добавлении картинок все ломается, и мое решение кажется неверным

Comments

[Илья]

css grid попробуй

[Алексей]

Илья, Тут смысл, что не выходит именно построить, я понимаю, что можно grid, но выходит так же криво

[Антон Литвиненко]

а куда добавлять картинки, эот блок расчитан на определенное количество их. как они должны будут выглядеть если их будет больше?

[Алексей]

Антон Литвиненко, Нет, этот блок статичен, и больше изменяться не будет

[Алексей]

Антон Литвиненко, то есть нужен просто этот блок
главное, чтобы в мобильной блоки вставали друг под друга как сейчас у меня

[Антон Литвиненко]

Алексей, основное что вам нужно сделать это вашу сетку, чтобы она держала форму без картинок. а картинки вставляете в каждую карточку абсолютом и object-fit: cover. как например сделать квадратный контейнер, если он пустой? дать ему паддинг топ 100%. чтобы был горизонтальны - паддинг топ-50%, вертикальный, паддинг топ 200%

Answer 1

[Mr_matrix]

.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 5px;
}

.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 3 / 4; }
.div3 { grid-area: 1 / 4 / 2 / 5; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 2 / 4 / 3 / 5; }