Адаптивный Grid в CSS
Grid Areas научил называть карту страницы. Адаптивный Grid спрашивает: что будет, когда viewport сужается? Схлопнутся колонки? Сайдбар уйдёт под шапку? Карточки перестроятся без второго HTML? Несколько спокойных breakpoint-паттернов — модуль Responsive Design дальше.
Набор инструментов адаптивного grid
📊 Адаптивный grid кратко
| Инструмент | Задача |
|---|---|
grid-template-columns |
Менять треки в media query (например две колонки → одна) |
grid-template-areas |
Перерисовать именованную карту, когда стопка лучше, чем ряд |
repeat(auto-fit, minmax(...)) |
Гибкие колонки карточек без breakpoint на каждое число |
| Media query | Меняет grid только при совпадении viewport |
gap |
Сохраняет ритм при смене треков или карты |
| Без лишнего HTML на ширину | Тот же DOM; CSS сдвигает layout |
Начните с grid, которому доверяете на широком экране. На одном ясном breakpoint меняйте колонки, строки или area-карту — не всё сразу. Имена из прошлого урока делают переписывание читаемым.
Колонки на breakpoint
Когда двухколоночная оболочка на телефоне должна стать одной, меняйте grid-template-columns в media query.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
@media (max-width: 40rem) {
.shell {
grid-template-columns: 1fr;
}
}
Перерисуйте area-карту на узком экране
Карты header / aside / main в ряд часто требуют нового блока grid-template-areas, когда сайдбар должен быть под шапкой. Перепишите строки в кавычках; регионы — прямоугольники.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
@media (max-width: 48rem) {
.shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"aside"
"main"
"footer";
}
}
auto-fit и minmax для досок карточек
В галереях и дашбордах repeat(auto-fit, minmax(...)) даёт колонкам появляться и переноситься по месту — часто с меньшим числом ручных breakpoints.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
Узкий viewport — не другой язык вёрстки: те же grid-инструменты, другие треки или карты. CSS вместо дублирования «мобильного HTML».
Спокойная привычка адаптивного grid
Сначала один главный breakpoint. Сочетайте смену колонок с переписыванием карты, когда помогают метки. auto-fit, где число карточек должно гибко меняться. Порядок DOM для клавиатуры разумный. Полная responsive-теория в следующем модуле.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas: "nav content";
gap: 1.25rem;
}
@media (max-width: 42rem) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"content";
}
}
.stats {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr));
gap: 0.75rem;
}
@media (max-width: 36rem) {
.stats {
grid-template-columns: 1fr;
}
}
Попробуйте сами
- Сделайте двухколоночную оболочку одной под
max-width: 40rem. - Перепишите карту header / aside / main / footer для узкой стопки.
- Ряд карточек с
repeat(auto-fit, minmax(14rem, 1fr)). - Один спокойный breakpoint — не сбрасывайте весь grid разом.
- Одно HTML-дерево; дальше Responsive Design.
Частые ошибки
- Вечно сжимать треки вместо смены колонок или стопки
- Отдельный «мобильный HTML» вместо обновления grid в CSS
- Разное число ячеек при переписывании
grid-template-areas - Огромная media query, сбрасывающая всё
- Считать этот урок целым курсом Responsive
Итог
- Адаптивный grid подстраивает колонки, карты и auto-fit доски под ширину
- Media queries ограничивают смену треков и карт
- Именованные areas хорошо сочетаются с переписыванием на маленьком экране
- Спокойные breakpoints и один DOM
- Модуль Grid (490–530) завершён; дальше Responsive Design
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху