Почему мои области CSS-сетки-шаблона не отображают элементы в ожидаемом макете на больших экранах? [закрыто] ⇐ 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;
}< /code>

Header
Sidebar
Main Content
Footer

Когда я просматриваю страницу на больших экранах (например, настольных компьютерах), боковая панель неправильно расположен рядом с основной областью содержимого. Кажется, что элементы перекрываются или не совпадают, как я предполагал. На мобильных устройствах все в порядке, но проблема возникает только на больших экранах.

• Я пробовал настроить столбцы-шаблоны сетки на разные значения,но проблема остается.
• Я ожидал, что боковая панель будет размещена рядом с основным контентом, а
  заголовок будет располагаться сверху, но этого не происходитэкраны большего размера.

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