Почему моя сетчатая сетка CSS-Template-не отображает элементы в ожидаемом макете на больших экранах? ⇐ CSS

[Anonymous]

Я использую сетку CSS с сеткой сетчатой, чтобы определить макет для моей веб-страницы. Макет отлично работает на небольших экранах, но на более крупных экранах некоторые элементы неуместны, а области сетки не выровнены, как ожидалось. Вот мой код HTML и CSS: < /p>

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

.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main-content"
"footer footer";
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
gap: 20px;
}

.header {
grid-area: header;
background-color: lightgray;
padding: 10px;
}

.sidebar {
grid-area: sidebar;
background-color: lightblue;
padding: 10px;
}

.main-content {
grid-area: main-content;
background-color: lightgreen;
padding: 10px;
}

.footer {
grid-area: footer;
background-color: lightcoral;
padding: 10px;
}

Header
Sidebar
Main Content
Footer
< /code>
< /div>
< /div>
< /p>
Когда я просматриваю страницу на больших экранах (например, настольные компьютеры), боковая панель не расположен должным образом рядом с основной областью содержания. Элементы, кажется, перекрываются или не выравниваются, как я предполагал. На мобильном телефоне все в порядке, но проблема возникает только на больших экранах. Br /> Но проблема сохраняется. Br /> больше экранов. < /li>
< /ul>

Подробнее здесь: https://stackoverflow.com/questions/793 ... ted-layout