CSS-шаблон сетки ⇐ CSS

[Anonymous]

Я хочу создать этот шаблон с использованием сетки:


Я новичок в сетке. Я не знаю свойств и того, как их разумно использовать для создания этого шаблона. Я работаю над гибкими свойствами, но не понимаю, как это сделать. добиться этого с помощью flex, поэтому я пробую это с помощью сетки.
Я попробовал поискать в Интернете информацию о сетке и получил несколько рекомендаций, которые я изменил для своих требований, вот код.

Код: Выделить всё

.co-sculpting-grid {
display: grid;
grid-template-columns: minmax(0, 264px) minmax(0, 369px) minmax(0, 465px);
grid-template-rows: minmax(0, 264px) minmax(0, 264px);
grid-gap: 24px;
}

.co-sculpting-grid>div {
background-color: floralwhite;
padding: 20px 0;
font-size: 18px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}

.item1 {
grid-row-start: 1;
grid-row-end: 2;
}

.item2 {
grid-row-start: 2;
grid-row-end: 3;
}

.item3 {
grid-row-start: 1;
grid-row-end: 3;
}

.item4 {
grid-row-start: 1;
grid-row-end: 2;
max-width: 264px;
}

.item5 {
grid-row-start: 2;
grid-row-end: 3;
}

Код: Выделить всё

Здесь элемент 4 занимает ту же ширину, что и элемент 5, но он должен быть около 60. % из элемента 5 также должен быть адаптивным во всей области просмотра. Третий столбец должен иметь то же самое, что и прикрепленное изображение.
Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/783 ... d-template