grid-template-columns и grid-template-rows задают количество и размер колонок и строк сетки - списком значений через пробел, где каждое число создаёт одну колонку или строку. Чтобы не повторять одинаковые значения вручную, есть функция repeat(), а gap задаёт отступы между ячейками.
В этом уроке
Попробуй прямо сейчас: добавь ещё пару элементов <div> в разметку - сетка сама достроит недостающую строку под них, хотя в grid-template-rows задано только 2 строки.
grid-template-columns и grid-template-rows: задаём колонки и строки вручную
В прошлом уроке про CSS Grid уже говорилось, что display: grid делает элемент grid-контейнером, а его прямые потомки становятся ячейками сетки. grid-template-columns и grid-template-rows задают саму структуру: список значений через пробел, где каждое число - это одна колонка (или строка), а количество чисел - это количество колонок (или строк). Значения можно смешивать - например, "200px 1fr 1fr" создаст одну колонку фиксированной ширины и две гибкие.
grid-template-columns: 200px 1fr 1fr; - три колонки: первая фиксированная 200px, оставшееся место поровну делят вторая и третья.
grid-template-columns: 3;, пытаясь просто указать "3 колонки" числом - grid-template-columns не считает колонки, а перечисляет их размеры; одно число создаст всего ОДНУ колонку такой ширины.
Функция repeat(): не повторяем одинаковые значения
Когда колонки или строки повторяются, вместо ручного перечисления удобнее repeat(количество, значение): repeat(3, 1fr) - это ровно то же самое, что "1fr 1fr 1fr", только короче и легче менять при правках. repeat() умеет повторять не только одно значение, а целый УЗОР из нескольких сразу: repeat(2, 100px 1fr) повторяет пару "100px и 1fr" дважды и даёт четыре колонки подряд - 100px, 1fr, 100px, 1fr.
grid-template-columns: repeat(4, 1fr); - четыре равные колонки, короче, чем писать "1fr 1fr 1fr 1fr".
grid-template-columns: repeat(4); без второго аргумента - у repeat() всегда два аргумента: сколько раз повторить и ЧТО именно повторить.
gap: расстояние между колонками и строками
gap - это сокращённая запись сразу для двух свойств: row-gap (отступ между строками) и column-gap (отступ между колонками). Одно значение (gap: 10px) задаёт оба отступа одинаковыми, а два значения через пробел (gap: 10px 30px) задают их по отдельности - первое число всегда для строк, второе - для колонок. Это, в отличие от margin у отдельных ячеек, чистое расстояние МЕЖДУ ячейками, которое не добавляется по внешнему краю самой сетки.
gap: 16px; - одинаковый отступ 16px и между строками, и между колонками.
gap: 30px 10px;, ожидая больший отступ между колонками - первое число всегда относится к строкам (row-gap), а не к колонкам; здесь как раз наоборот - между строками 30px, а между колонками 10px.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Пытаются задать число колонок одним числом, а не списком размеров | grid-template-columns: 3; создаёт одну колонку шириной 3px, а не три колонки | Использовать repeat(3, значение) или перечислить размеры через пробел явно |
| Забывают второй аргумент у repeat() | Правило не действует - repeat() требует и количество, и повторяемое значение | Всегда указывать оба аргумента: repeat(количество, значение) |
| Путают порядок значений в gap: 10px 30px | Отступы между строками и колонками получаются перепутанными местами | Помнить порядок: первое значение - row-gap (строки), второе - column-gap (колонки) |
| Пугаются, когда элементов больше, чем строк в grid-template-rows | Кажется, что лишние элементы должны пропасть или сломать вёрстку | Сетка сама достраивает недостающие строки автоматической высоты - это ожидаемое поведение |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| 3 колонки фиксированной ширины | grid-template-columns: 100px 100px 100px; |
| То же самое короче | grid-template-columns: repeat(3, 100px); |
| Повторяющийся узор из двух значений | grid-template-columns: repeat(2, 100px 1fr); |
| Одинаковый отступ между строками и колонками | gap: 16px; |
| Разные отступы (строки, колонки) | gap: 10px 30px; |
| Элементов больше, чем строк в шаблоне | лишние строки создаются автоматически |
Коротко: отвечаем на вопросы
Что будет, если элементов больше, чем ячеек, заданных в grid-template-rows?
Сетка автоматически создаст дополнительные строки под лишние элементы - по умолчанию их высота подстраивается под содержимое. Элементы не пропадают и не сжимают уже заданные строки - grid-template-rows описывает только явно заданные строки, а всё, что не поместилось, попадает в новые неявные строки.
