Проблема < /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
