Почему сетка-теплуя-разрывается при комбинировании Minmax () и автоматического подготовки в сетке CSS? ⇐ Html

[Anonymous]

Проблема < /p>
Проблема < /p>
Я пытаюсь создать отзывчивый макет с использованием сетки CSS. Я использую сетку-тип-ареасы в сочетании с Auto-Fit и MinMax (), чтобы сделать макет гибкой.

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

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 10px;
height: 100vh;
}

header { grid-area: header; background: lightcoral; padding: 20px; }
main   { grid-area: main; background: lightblue; padding: 20px; }
footer { grid-area: footer; background: lightgreen; padding: 20px; }





Header
Main Content
Footer



< /code>
Но когда я изменяю размер браузера, области ломаются, а иногда и основное и нижнее колонтитул или не охватывают всю ширину. Сетка-Template-areas с автоматическим и minmax ()? Или есть правильный способ заставить строки вести себя ведущие, как и ожидалось, сохраняя его отзывчивым?     * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 10px;
height: 100vh;
}

header { grid-area: header; background: lightcoral; padding: 20px; }
main   { grid-area: main; background: lightblue; padding: 20px; }
footer { grid-area: footer; background: lightgreen; padding: 20px; }
< /code>


Header
Main Content
Footer

Подробнее здесь: https://stackoverflow.com/questions/797 ... t-in-css-g