Загрузка...

Grid-элементы в CSS

Урок Grid Container вёл родителя — треки, gap и значения ячейки по умолчанию. Grid-элементы задают другой вопрос: как каждый потомок занимает линии, перекрывает треки и меняет выравнивание в своей ячейке? Освойте размещение по линиям до именованных областей.

Набор инструментов grid-элементов

📊 Grid-элементы одним взглядом

Свойство	Повседневная роль
`grid-column`	Задаёт линии начала/конца колонки элемента (сокращение)
`grid-row`	Задаёт линии начала/конца строки элемента (сокращение)
`span`	Растягивает элемент на N треков от линии старта
`justify-self`	Переопределяет `justify-items` для одного элемента (ось inline)
`align-self`	Переопределяет `align-items` для одного элемента (ось block)
`place-self`	Сокращение для `align-self` + `justify-self`

Линии grid нумеруются от начального края. Элемент от линии 1 до линии 3 закрывает два колоночных трека. Сначала думайте линиями; именованные области придут позже.

grid-column — сесть на линии колонок

grid-column: start / end закрепляет потомка между линиями колонок. Сайдбар часто на первом треке, а основная панель забирает остальное.

Сайдбар на линиях колонок

css

.board {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}

.board__aside {
grid-column: 1 / 2;
}

.board__main {
grid-column: 2 / 3;
}

span — растянуть по трекам

span считает треки от линии старта. Герой на всю ширину на доске из трёх колонок часто берёт grid-column: 1 / span 3.

Герой закрывает три колонки

css

.hero {
grid-column: 1 / span 3;
}

grid-row — сесть на линии строк

Та же идея на оси block. Закрепите баннер в верхней полосе или дайте высокой карточке два строковых трека через span.

Баннер на линиях строк

css

.banner {
grid-row: 1 / 2;
}

.tall-card {
grid-row: 2 / span 2;
}

Колонка и строка вместе

Комбинируйте оба, когда потомку нужен ясный прямоугольник — например выделенная плитка на две колонки и одну строку.

Выделенная плитка со span

css

.feature {
grid-column: 1 / span 2;
grid-row: 1 / 2;
}

place-self — один элемент, другое выравнивание ячейки

Переопределите justify-items / align-items контейнера для одного потомка. place-self: center — спокойное сокращение, когда обе оси должны совпасть.

Переопределение place-self

css

.board {
display: grid;
justify-items: stretch;
align-items: stretch;
gap: 0.75rem;
}

.board .badge {
place-self: center;
}

Спокойная привычка grid-элемента

Сначала размещайте по линиям колонок и строк, используйте span, когда потомок закрывает несколько треков, затем точечно правьте выравнивание через place-self. Держите порядок DOM разумным — избегайте трюков order, ломающих фокус клавиатуры. Именованные области шаблона оставьте уроку Grid Areas.

Именованные роли элементов

css

.shell__hero {
grid-column: 1 / -1;
}

.shell__aside {
grid-column: 1 / 2;
align-self: start;
}

.shell__main {
grid-column: 2 / 3;
}

Попробуйте сами

Соберите доску из двух колонок; поставьте aside на grid-column: 1 / 2, main на 2 / 3.
Добавьте героя на три колонки с grid-column: 1 / span 3.
Закрепите баннер через grid-row: 1 / 2.
Растяните выделенную плитку на две колонки и одну строку.
Отцентрируйте badge через place-self: center и отметьте именованные области на потом.

Частые ошибки

Ставить span или номера линий на контейнер, а не на элемент
Забывать, что линии начинаются с 1, и считать треки как линии
Путать размещение элемента с упаковкой justify-content у родителя
Прыгать к именованным grid-template-areas до уверенных линий
Менять визуальный порядок через order и ломать порядок tab/источника

Итог

Grid-элементы управляют размещением по линиям, span и выравниванием по элементу
grid-column / grid-row закрепляют линии начала и конца
span растягивает по трекам от линии старта
place-self (и self-свойства) переопределяют выравнивание ячейки для одного потомка
Именованные области шаблона — в следующем уроке Grid Areas

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык