CSS Grid: template-areas, auto-fit и minmax
Именуйте области Grid для создания понятных макетов, используйте auto-fit с minmax() для адаптивных столбцов и управляйте неявными треками.
«CSS Grid: template-areas, auto-fit и minmax» — бесплатный урок Frontend Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Именованные области шаблона — визуальный макет
grid-template-areas позволяет называть области в наглядном формате ASCII. Каждая строка задаёт ряд, каждое слово — ячейку. Точки (.) обозначают пустые ячейки. Назначайте элементы областям с помощью grid-area: name.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Адаптивные области шаблона с медиазапросами
Изменяйте расположение областей шаблона в контрольных точках, чтобы на мобильных устройствах переместить боковую панель из отдельного столбца под основное содержимое.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}auto-fit и auto-fill
auto-fit: сворачивает пустые дорожки, чтобы элементы растягивались и заполняли строку. auto-fill: сохраняет структуру сетки, даже если дорожки пусты. Для адаптивных сеток карточек почти всегда нужен auto-fit.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}minmax() подробно
minmax(min, max) задаёт дорожку размером не меньше min и не больше max. Распространённые сочетания: minmax(0, 1fr) (полностью гибкая дорожка), minmax(200px, 1fr) (адаптивная дорожка с минимальным размером), minmax(auto, auto) (размер определяется содержимым).
Объединение столбцов и строк
Используйте grid-column: span 2, чтобы элемент занимал два столбца. Объедините это с grid-row: span 2, чтобы выделенный элемент занимал блок 2×2 в сетке.
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}Плотное автоматическое размещение
grid-auto-flow: dense заполняет пустые промежутки небольшими элементами. Это полезно для макетов, похожих на каменную кладку, где элементы имеют разные размеры.
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}Дробные единицы и проценты
Единица fr всегда обозначает доступное пространство после вычитания дорожек фиксированного размера и промежутков. Сочетание fr с фиксированными размерами даёт максимальную гибкость: фиксированная боковая панель и гибкое основное содержимое.
grid-auto-columns и grid-auto-rows
Эти свойства управляют размером неявно созданных дорожек, когда элементы размещаются за пределами явно заданной сетки. grid-auto-rows: minmax(100px, auto) задаёт неявным строкам минимальную высоту.
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}Проверка сетки в DevTools
Chrome DevTools накладывает на страницу линии сетки и названия областей, если нажать на значок «grid» рядом с контейнером сетки на панели Elements. Используйте это для поиска неожиданных размеров дорожек и неправильного размещения элементов.
CSS Subgrid
grid-template-columns: subgrid позволяет вложенной сетке выравниваться по дорожкам родительской сетки. Эта возможность поддерживается всеми современными браузерами с 2023 года и необходима для выравнивания внутреннего содержимого карточек в сетке.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}Когда Grid лучше Flexbox
Grid выигрывает, когда нужен явный двумерный контроль, то есть важны и строки, и столбцы. Если нужно просто расположить элементы в ряд или стопку, Flexbox проще.
Быстрая проверка
Какое значение CSS Grid создаёт столько столбцов шириной минимум 200px, сколько помещается, при этом каждый столбец получает одинаковую долю оставшегося пространства?
Повторение: продвинутый CSS Grid
grid-template-areas создаёт понятные именованные макеты. auto-fit вместе с minmax создаёт адаптивные сетки без медиазапросов. Объединяйте элементы по столбцам и строкам. Плотное автоматическое размещение заполняет промежутки. Используйте наложение сетки в DevTools для поиска ошибок. Subgrid выравнивает вложенные элементы по дорожкам родительской сетки.
Часто задаваемые вопросы
Урок «CSS Grid: template-areas, auto-fit и minmax» бесплатный?
Да — полный текст урока «CSS Grid: template-areas, auto-fit и minmax» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «CSS Grid: template-areas, auto-fit и minmax»?
Именуйте области Grid для создания понятных макетов, используйте auto-fit с minmax() для адаптивных столбцов и управляйте неявными треками. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «CSS Grid: template-areas, auto-fit и minmax»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Глубокое изучение Flexbox: выравнивание, перенос и порядок
- CSS Grid: template-areas, auto-fit и minmax
- Совместное использование Flexbox и Grid
- Переменные CSS для темизации