Боковая панель сетки сетки CSS имеет огромное расстояние ⇐ Html

[Anonymous]

Я использовал сетку CSS для создания гибкой макета, где я могу перемещать DIV в разные слоты с рабочего стола на мобильный. У меня есть скриншот, чтобы продемонстрировать. Тем не менее, мне также нужно сохранить гибкость, которую я имею для мобильного телефона, где я использую Grid-template-areas < /code> для перемещения разделов в рамках медиа-запроса. />

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

.grid-container {
display: grid;
grid-template-columns: 6fr 4fr;
gap: 2rem;
grid-template-areas:
"section1 section5"
"section2 section6"
"section3 ."
"section4 .";

@media (max-width: 768px) {
grid-template-columns: 1fr;
grid-template-areas:
"section1"
"section5"
"section2"
"section6"
"section3"
"section4";
}
}

.content-section {
background: #eee;
border: 1px solid #ccc;
padding: 1rem;

grid-area: $ {
({
area
})=>area
}

;
align-self: start;
}< /code>


long content
long content
long content
long content
long content
long content
long content
long content
long content

2
3
4
5
6

Подробнее здесь: https://stackoverflow.com/questions/796 ... ge-spacing