grid-column и grid-row растягивают элемент сразу на несколько ячеек сетки, указывая номера линий, между которыми он должен поместиться. grid-area - это сокращённая запись сразу всех четырёх линий или, ещё удобнее, имя области, заданное в grid-template-areas.
В этом уроке
Попробуй прямо сейчас: поменяй у .item-big значение grid-column на "1 / 4" - элемент растянется на все три колонки сразу.
grid-column и grid-row: растягиваем элемент по линиям сетки
В прошлом уроке про grid-template-columns и grid-template-rows сетка получила свои колонки и строки - а вместе с ними и линии между ними, пронумерованные от 1. grid-column и grid-row как раз указывают элементу, между какими линиями поместиться: grid-column: 1 / 3 значит "от линии 1 до линии 3", то есть элемент займёт ДВЕ ячейки (первую и вторую колонку), а не три - линии считают границы, а не сами ячейки.
Если точный номер конечной линии считать неудобно, есть ключевое слово span - оно задаёт не линию, а количество ячеек: grid-column: span 2 растянет элемент на 2 колонки от того места, куда его поставит автоматическая расстановка. Ещё можно использовать отрицательные номера линий - они считают С КОНЦА сетки: grid-column: 2 / -1 растянет элемент от второй линии до самой последней, сколько бы колонок ни было в сетке.
grid-column: 1 / 3; - элемент займёт 2 колонки (от линии 1 до линии 3).
grid-column: 1 / 3;, ожидая 3 колонки - число "3" здесь номер линии-границы, а не количество ячеек; чтобы растянуть на 3 колонки от первой линии, нужно grid-column: 1 / 4 или grid-column: span 3.
grid-area: сокращённая запись всех четырёх линий
Вместо grid-column и grid-row по отдельности можно задать все четыре линии сразу через grid-area - но важно запомнить порядок: сначала СТРОКА, потом КОЛОНКА, и так дважды - grid-row-start / grid-column-start / grid-row-end / grid-column-end. Это легко перепутать, потому что в самих grid-column и grid-row порядок другой - там речь только про одну ось за раз.
grid-area: 1 / 1 / 3 / 3; - блок 2×2 от первой строки и первой колонки: с 1-й по 3-ю линию строк, с 1-й по 3-ю линию колонок.
grid-area: 1 / 1 / 3 / 2;, ожидая широкий и невысокий блок - первая пара чисел (1 / 1) задаёт СТРОКИ, а не колонки; такой элемент выйдет узким (1 колонка) и высоким (2 строки), а не наоборот.
grid-template-areas: именованные области сетки
Ещё один способ разместить элементы - дать областям сетки имена прямо на контейнере через grid-template-areas, а затем сослаться на имя в grid-area у каждого элемента. Каждая строка в grid-template-areas - это отдельная строка в кавычках, где слова через пробел - это ячейки; одинаковые слова, стоящие рядом (по горизонтали или вертикали), объединяются в одну область. Точка (.) означает пустую ячейку без области.
Здесь есть жёсткое правило: одинаковые имена обязаны образовывать ПРЯМОУГОЛЬНИК. Если попытаться описать Г-образную или ступенчатую область, всё объявление grid-template-areas целиком становится невалидным и браузер его игнорирует - сетка при этом не ломается, а просто раскладывает элементы как обычно, без учёта имён.
grid-template-areas: "header header" "nav main" "nav footer"; - шапка на всю ширину, слева узкая колонка nav на все строки под ней, справа main и footer друг под другом.
grid-template-areas: "a a b" "a b b"; - область "a" занимает верхний-левый угол и часть нижней строки не прямоугольником (Г-образно) - объявление невалидно целиком, ни одна из областей работать не будет.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Путают номер линии с количеством ячеек | grid-column: 1 / 3 воспринимают как "3 колонки", хотя это всего 2 колонки между линиями 1 и 3 | Считать линии-границы, а не ячейки, или использовать span для явного количества ячеек |
| Путают порядок значений в grid-area | Ожидают порядок колонка-строка, как в grid-column, а на деле сначала строка, потом колонка | Запомнить: row-start / column-start / row-end / column-end |
| Делают Г-образную или ступенчатую область в grid-template-areas | Всё объявление становится невалидным и полностью игнорируется браузером | Следить, чтобы одинаковые имена всегда образовывали прямоугольник |
| Случайно ставят двум элементам одинаковые линии сетки | Элементы накладываются друг на друга - более поздний по коду перекрывает более ранний | Проверять, что у каждого элемента свой уникальный набор линий или своя именованная область |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Растянуть на 2 колонки от линии 1 | grid-column: 1 / 3; |
| Растянуть на 2 колонки без точного старта | grid-column: span 2; |
| Растянуть до последней линии сетки | grid-column: 2 / -1; |
| Блок 2×2 через одно свойство | grid-area: 1 / 1 / 3 / 3; |
| Именованная область в разметке | grid-template-areas: "header header" "nav main"; |
| Поставить элемент в именованную область | grid-area: header; |
| Пустая ячейка в шаблоне областей | . (точка) |
Коротко: отвечаем на вопросы
В чём разница между grid-area и grid-column/grid-row?
grid-column и grid-row задают позицию только по одной оси каждое - только колонки или только строки. grid-area - это сокращение сразу для всех четырёх линий (row-start/column-start/row-end/column-end) или, если на контейнере задан grid-template-areas, просто имя готовой области.
Что будет, если области в grid-template-areas не образуют прямоугольник?
Всё объявление grid-template-areas целиком становится невалидным и браузер его игнорирует - элементы раскладываются как в обычной сетке без именованных областей, ни один не займёт задуманную область.
Можно ли использовать отрицательные числа в grid-column и grid-row?
Да - отрицательные номера линий считают с конца явной сетки: -1 всегда последняя линия, -2 предпоследняя и так далее. Это удобно, когда нужно растянуть элемент до края сетки независимо от точного числа колонок или строк.
