Grid-контейнер в CSS
Введение в Grid сделало родителей решётками. Этот урок остаётся на контейнере: задайте треки, поставьте gap, выровняйте элементы в ячейках и упакуйте сетку, когда остаётся свободное место. Span элементов и именованные области ждут уроков Grid Items и Grid Areas.
Набор инструментов grid-контейнера
📊 Grid-контейнер одним взглядом
| Свойство | Повседневная задача |
|---|---|
grid-template-columns |
Задаёт размеры колоночных треков |
grid-template-rows |
Задаёт размеры строковых треков |
gap |
Промежутки между треками |
justify-items / align-items |
Выравнивают каждый элемент в своей ячейке (ось inline / block) |
justify-content / align-content |
Позиционируют всю сетку, когда она меньше контейнера |
grid-auto-flow |
Управляет порядком авторазмещения (row или column) |
Сначала нарисуйте треки. Затем решите, как ячейки выравнивают содержимое, и только потом — как ведёт себя оставшееся пространство вокруг всей сетки.
Треки шаблона — колонки и строки
grid-template-columns и grid-template-rows набрасывают решётку. Смешивайте fr, длины и repeat() для повседневных досок.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
min-height: 16rem;
}
gap — честные промежутки
gap (или row-gap / column-gap) разносит треки без хаков margin на каждом ребёнке.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.25rem;
}
justify-items и align-items — внутри ячейки
Они выравнивают каждый элемент внутри его ячейки. justify-items на оси inline; align-items на оси block. Не путайте с упаковкой содержимого.
.board {
display: grid;
grid-template-columns: repeat(2, 8rem);
justify-items: center;
align-items: center;
gap: 0.75rem;
}
justify-content и align-content — упаковка сетки
Когда треки меньше контейнера, свойства content сдвигают или разносят всю сетку. Полезно для досок иконок, которые не должны тянуться вечно.
.board {
display: grid;
grid-template-columns: repeat(3, 6rem);
justify-content: space-between;
align-content: start;
gap: 0.5rem;
min-height: 12rem;
}
Спокойная привычка grid-контейнера
Сначала шаблон колонок и строк, потом gap, потом выравнивание элементов в ячейках, потом упаковка content, если осталось место. Загляните в grid-auto-flow, когда важен порядок авторазмещения. Span, номера линий и именованные области оставьте следующим урокам Grid.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 1.25rem;
justify-items: stretch;
align-items: stretch;
}
Попробуйте сами
- Сделайте доску с тремя колонками
1frи строкамиauto 1fr auto. - Добавьте
gap: 1rem. - Отцентрируйте содержимое ячеек через
justify-itemsиalign-items. - Упакуйте доску с фиксированными треками через
justify-content: space-between. - Запишите одно свойство, которое оставите для Grid Items или Grid Areas.
Частые ошибки
- Путать
justify-items(в ячейках) сjustify-content(вся сетка) - Слишком рано ставить
spanэлемента или имена областей на контейнер - Задавать только колонки и удивляться случайной высоте строк
- Переносить привычки Flex
growна grid-контейнер - Считать этот урок целым модулем Areas
Итог
- Свойства grid-контейнера задают треки, промежутки и выравнивание
grid-template-columns/rowsнабрасывают решёткуjustify-items/align-itemsвыравнивают содержимое в ячейкахjustify-content/align-contentупаковывают сетку в свободном пространстве- Span элементов и именованные области — в следующих уроках Grid
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху