Комплект сетки CSS Создал огромный разрыв в моей боковой панели между 2 DIV ⇐ Jquery

[Anonymous]

Я использовал сетку CSS для создания гибкой макета, где я могу перемещать DIV в разные слоты с рабочего стола на мобильный. У меня есть скриншот, чтобы продемонстрировать. Тем не менее, мне также необходимо сохранить гибкость, которую я имею для мобильного телефона, где я использую сетку-template-areas для перемещения разделов вокруг медиа-запроса. src = "https://i.sstatic.net/jt8spv2c.png" /> < /p>

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

.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 ... een-2-divs