Необходимо создать 20 лайаут с помощью CSS GRIG ( ПРОГРАММА VST CODE )

Question

Необходимо создать 20 лайаут с помощью CSS GRIG ( ПРОГРАММА VST CODE )

Руслан Волков Ученик (101), на голосовании 11 месяцев назад

Все эти лайауты очень часто встречаются в современной верстке интерфейсов.
Вместите контейнеры в ширину страницы (помогут фракции и заданная ширина 100wv). Не забудьте про расстояние между боксами – свойство gap.
Высота может быть больше высоты экрана.
У вас будет единый контейнер для всех лайаутов – для всех 20 квадратов (позиционирование grid).
Внутри большого контейнера у вас будет 20 элементов, каждый из которых будет содержать столько внутренних элементов, сколько нарисовано на картинке. Позиционирование внутренних элементов также выполните свойствами grid.

Answer 1

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

Answer 2

<div class="container">
<div class="item a">текст</div>
<div class="item b">текст2</div>
<div class="item c">текст3</div>
</div>

.container{
white: 80vh;
height: 100vh;
background: green;
border: 3px dashed #0af;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px 20px;
}
.a {
grid-column: span 4;
}
.b,.c {
grid-column: span 2;
grid-row:span 2;
}
.item{
border: 2px solid;
padding: 10px (по желанию);
}

Вот образец для первой картинки.