что такое гриды в css
Гайд по grid
Время чтения: больше 15 мин
Обновлено 18 ноября 2021
Что такое гриды?
CSS Grid Layout (спецификация) или просто гриды — это удобная технология для раскладки элементов на веб-страницах. В отличие от флексбоксов, одновременно работающих только с одним измерением, гриды дают возможность работать одновременно с двумя: горизонталью и вертикалью.
На заре веба для создания раскладки поинтереснее одноколоночной часто использовались таблицы. Но проблема была в том, что таблицы были сделаны не для этого. Даже если отброс ить семантическую нагруженность этого элемента, отдельные свойства для стилизации были крайне неудобными. По сути, это был костыль за неимением более удобных способов. Гриды же изначально были придуманы и реализованы как инструмент для создания раскладки.
Принцип работы гридов чем-то похож на таблицы. Вместо работы только с рядами или только с колонками с помощью гридов можно работать с так называемыми грид-ячейками, позиционируя элементы по вертикали и горизонтали одновременно.
В этом гайде описаны только самые используемые и устоявшиеся свойства, а не все возможные. Так как технология сейчас в стадии активного развития и внедрения, что-то в ней может меняться. Пожалуйста, обращайтесь к спецификации, если не нашли чего-то в этом гайде.
Основные термины
Грид-элемент: дочерний элемент, прямой потомок грид-контейнера. Подчиняется правилам раскладки гридов.
Грид-линия: разделительная линия, формирующая структуру грида. Может быть как вертикальной (грид-линия колонки), так и горизонтальной (грид-линия ряда). Располагается по обе стороны от колонки или ряда. Используется для привязки грид-элементов.
Синяя линия — грид-линия колонки.
Грид-ячейка: пространство между соседними грид-линиями. Единица грид-сетки.
Грид-ячейка — между первой и второй грид-линиями ряда и второй и третьей грид-линиями колонки.
Грид-полоса: пространство между двумя соседними грид-линиями. Может быть проще думать о грид-полосе как о ряде или колонке.
Горизонтальная грид-полоса между первой и второй грид-линиями ряда.
Грид-область: область, ограниченная четырьмя грид-линиями. Может состоять из любого количества ячеек как по горизонтали, так и по вертикали.
Грид-область между первой и третьей грид-линиями ряда и первой и второй грид-линиями колонки.
Свойства грид-контейнера
display
Свойства, задающие размеры и количество колонок или рядов грид-раскладки соответственно.
Можно явно именовать грид-линии, используя для этого квадратные скобки:
Каждая линия может иметь больше одного имени. Это чем-то похоже на классы в HTML — вы можете задать элементу больше одного класса. Тут аналогичная ситуация. Например, такой код будет совершенно валиден, у второй и третьей грид-линий колонки по два имени:
Будет создано 3 колонки по 250 пикселей:
С появлением гридов у нас появилась и новая единица измерения: fr 🦊
fr (от fraction — доля, часть) отвечает за свободное пространство внутри грид-контейнера.
Например, этот код создаст три колонки, каждая из которых будет занимать 1/3 ширины родителя:
Что аналогично записи:
Если элементов внутри грид-контейнера больше, чем может поместиться в заданные явно ряды и колонки, то для них создаются автоматические, неявные ряды и колонки. При помощи свойств grid-auto-columns и grid-auto-rows можно управлять размерами этих автоматических рядов и колонок.
В этом примере создаются две явные колонки размером 50 и 150 пикселей соответственно. Элементы, начиная с третьего, в эти два ряда не помещаются, и для них создаются автоматические ряды. При помощи свойства grid-auto-rows мы указываем, что автоматические ряды должны иметь размер 15 пикселей.
Можно задавать больше одного значения для автоматических колонок или рядов. Тогда паттерн размера будет повторяться до тех пор, пока не кончатся грид-элементы.
Как видите, автоматически создаются колонки размером 15, 25 и затем 5 пикселей. И так до тех пор, пока элементы не закончатся.
grid-auto-flow
Принципы работы этого свойства удобнее всего изучать на примере, когда есть большой блок, который не помещается в одну грид-ячейку.
Как видите, третий элемент не поместился в последнюю ячейку первого ряда и был перенесён в следующий ряд. Следующий за ним четвёртый элемент встал в ближайшую доступную ячейку во втором ряду.
Добавим к значению свойства grid-auto-flow слово dense :
Теперь четвёртый элемент встал в ряд, но занял при этом пустую ячейку в первом ряду. Браузер старается закрыть все дырки в сетке, переставляя подходящие элементы на свободные места.
Посмотрим пример со значением column :
Видим аналогичную картину: третий элемент не поместился в последнюю ячейку первой колонки и встал во вторую колонку. Следующий за ним четвёртый элемент встал ниже во второй колонке.
Добавим dense к текущему значению:
В результате четвёртый элемент занял пустую ячейку в первой колонке.
grid-template-areas
Обратите внимание, что нужно называть каждую из ячеек. Например, если шапка или подвал нашего сайта будут занимать все три существующие колонки, то нужно будет трижды написать названия этих областей. Удобнее всего будет подписывать области в виде некой таблицы. Подобный способ записи чем-то похож на таблицы в Markdown:
Обратите внимание, что между строками не ставятся запятые или какие-то другие символы, имена разделяются пробелами.
Получится такая раскладка:
Имена областей должны разделяться пробелами. Это важно, особенно в том случае, если вы хотите расположить две пустых ячейки рядом. Разделите точки пробелами, иначе браузер подумает, что это одна пустая ячейка.
grid-template
Но техническая возможность есть, выбирать вам! 😉
Задаёт отступы между колонками или рядами.
В инспекторе отступы заштриховываются, так их можно отличить от грид-элементов. В этом примере между рядами отступы по 50 пикселей, а между колонками — по 10 пикселей.
justify-items
Свойство, с помощью которого задаётся выравнивание грид-элементов по горизонтальной оси. Применяется ко всем элементам внутри грид-родителя.
start — выравнивает элемент по начальной (левой для LTR) линии.
end — выравнивает элемент по конечной (правой для LTR) линии.
center — выравнивает элемент по центру грид-ячейки.
stretch — растягивает элемент на всю ширину грид-ячейки.
align-items
Свойство, с помощью которого можно выровнять элементы по вертикальной оси внутри грид-контейнера.
start — выравнивает элемент по начальной (верхней) линии.
end — выравнивает элемент по конечной (нижней) линии.
center — выравнивает элемент по центру грид-ячейки.
stretch — растягивает элемент на всю высоту грид-ячейки.
place-items
Мегашорткат, позволяющий задать значения всему и сразу. А конкретно с его помощью можно указать значения для следующих свойств:
Перед тем как соблазниться возможностью расписать всё в одном свойстве, дважды (а то и трижды) подумайте о читабельности кода. Учтите и то, что гриды относительно новая и не такая уж простая технология. Не каждый коллега сможет прочесть этот шорткат.
none — значение по умолчанию. Это ключевое слово сбрасывает значения для всех свойств, входящих в этот шорткат.
Можно указать допустимые значения для шортката grid-template :
В том числе можно указать имена линий:
Можно задать размеры колонок и рядов. Создадим два ряда и две колонки:
auto-flow — это ключевое слово даёт браузеру понять, что создавать при необходимости: колонки или ряды.
Если auto-flow стоит справа от слэша, то будут создаваться автоматические колонки:
Если auto-flow стоит слева от слэша, то будут создаваться автоматические ряды:
Важно ставить это слово сразу после auto-flow :
Ниже будет несколько примеров с блоками кода, которые делают одно и то же, в первом случае через шорткат, во втором — как обычно.
Задаёт размеры и количество колонок и рядов:
Задаёт размеры и количество рядов, а также автоматические колонки:
Задаёт размеры и количество рядов, автоматические колонки и распределение dense :
Возможны и более сложные комбинации значений этого свойства. Например, можно сразу задать имена областям:
Что соответствует такому коду:
Свойства грид-элементов
Определяют положение элемента внутри грид-сетки при помощи указания на конкретные направляющие линии.
Элементы могут перекрывать друг друга, накладываться друг на друга. Можно использовать свойство z-index для управления контекстом наложения.
Значения для *-start и *-end разделяются слэшем.
Элемент начинается с третьей линии по горизонтали и растягивается на 2 ячейки. По вертикали элемент начинается от линии с именем [third-line] и заканчивается у четвёртой линии.
Если опустить слэш и второе значение, то элемент будет размером в одну ячейку.
grid-area
Пример с указанием на именованную область:
justify-self
С помощью этого свойства можно установить горизонтальное выравнивание для отдельного элемента, отличное от выравнивания, заданного грид-родителю.
align-self
place-self
Специальные функции и ключевые слова
Анимация свойств
Для анимации доступны следующие свойства и их значения:
Большая статья про гриды (CSS Grid Layout)
Мы давно изучали CSS-гриды, сами и вместе с зарубежными авторами. Тогда же возникла мысль оформить результат в виде подробного руководства по ним, вроде этого по флексбоксам. Это оказалось не так-то просто: стандарт большой, вводит множество новых понятий, к тому же эти понятия переплетены друг с другом, совсем как полосы самих гридов (как показать грид-области без привязанных к ним грид-элементов, и наоборот?). Поэтому работа над статьей, скажем прямо, несколько затянулась:) Но теперь, когда грид-раскладка уже поддерживается почти повсеместно (Firefox 52+, Chrome 57+, Opera 44+, Safari 10.1+/iOS 10.3+ Safari, Яндекс-Браузер 17+, а также в Android WebView), мы рады представить вам результат трудов. Надеемся, он поможет разобраться в горах новых возможностей. Это не «полное руководство» (полностью описать все возможности CSS Grid в одной статье просто нереально!), но мы постарались упомянуть некоторые важные моменты, упущенные многими из «полных руководств». Любые дополнения и уточнения приветствуются!
Основа и терминология
Грид — это двумерная (в отличие от от одномерных флексбоксов) сетка. Как табличная, только виртуальная, не связанная с разметкой. Состоит из следующих элементов:
See the Pen LypJVK by Ilya Streltsyn (@SelenIT) on CodePen.
Ограничение, что грид-элементы должны быть непосредственными потомками грид-контейнера, в будущем снимут подсетки (subgrids). Пока их нет, его можно частично обойти с помощью display:contents или эмулировать CSS-переменными.
Визуализировать грид-линии умеет отладчик Firefox (иконка в виде решетки, указанная стрелкой):
Примечание: простой текст (всё, кроме пробелов, табов и переводов строк), оказавшийся непосредственно в грид-контейнере (между тегами), оборачивается в анонимные грид-элементы. Подобный эффект нам уже знаком по флексбоксам.
Грид-контейнер и его свойства
Создание грид-контейнера
See the Pen Kzvrrw by Ilya Streltsyn (@SelenIT) on CodePen.
Разметка колонок и рядов
Размеры грид-полос
Размер каждой грид-полосы (ширину колонки/высоту ряда) можно задавать:
Пример действия разных значений:
See the Pen ZWJmzg by Ilya Streltsyn (@SelenIT) on CodePen.
Обратите внимание, что при уменьшении грид-контейнера последняя колонка и последний ряд выходят за его край, так как сумма размеров грид-полос становится больше размера контейнера. Это нормальное поведение.
Также обратите внимание, что при увеличении размеров контейнера ряд с размером auto начинает растягиваться по высоте. А колонка с размером auto не растягивается, потому что есть другие колонки с гибким размером ( fr ). Если бы их не было, колонка с auto бы тоже растягивалась.
Имена грид-линий
Удобны для привязки грид-элементов к ним. Пишутся в квадратных скобках перед или после размера соотв. полосы. У одной грид-линии может быть много имен. Имена грид-линий могут быть практически любыми — как имена классов. Допустимы русские буквы и др. символы юникода, даже эмодзи (но чувствуйте меру:).
У каждой грид-линии, именованной или нет, есть также два номера: с начала грида, положительное число (1, 2, 3, …), и с конца грида, отрицательное число (-1, −2, −3, …). Привязывать грид-элементы к ним можно как по именам, так и по любому из этих номеров.
Больше примеров и подробностей — в отдельной статье.
Функция repeat()
Есть несколько важных ограничений:
Разметка грид-областей
Используем свойство grid-template-areas (известное как «разметка страницы ASCII-графикой»). Каждая строка значения задает имена ячейкам соответствующего ряда, повторение одного и того же имени указывает, что грид-область с таким именем охватывает несколько ячеек. Имена грид-областей, как и грид-линий, могут быть любыми (хоть эмодзи), кроме ключевых слов CSS. Неиспользуемые (пропускаемые) ячейки обозначаются точкой:
В эти области можно напрямую помещать грид-элементы.
При создании грид-области с именем что-то ограничивающие ее грид-линии получают имена что-то-start и что-то-end. И наоборот: пара параллельных грид-линий с именами что-то-start и что-то-end автоматически создает между собой именованную грид-область с именем что-то.
Можно указывать одновременно и размеры, и grid-template-areas :
See the Pen GmJVPO by Ilya Streltsyn (@SelenIT) on CodePen.
Сокращенная запись для колонок, рядов и областей: grid-template
Вот предыдущий пример, переписанный на grid-template и отформатированный для максимальной наглядности (посмотреть вживую):
Неявный грид (автоматические ряды и колонки)
See the Pen OpKzxK by Ilya Streltsyn (@SelenIT) on CodePen.
Важный момент: грид-линия № 1 не всегда совпадает с началом грид-контейнера! Браузер пытается уместить в грид-контейнер весь грид, не только явные полосы. Поскольку по умолчанию грид-полосы выравниваются по началу грид-контейнера, неявные грид-полосы будут выталкивать явные вниз (для рядов) или вправо (для колонок, для текста слева направо). В этом примере, благодаря тому, что общая ширина неявных полос сверху и снизу одинакова, можно подогнать явные ряды к границам грид-контейнера, отцентрировав весь грид по вертикали (с помощью align-content: center ). Можете поменять align-content у грид-контейнера и увидеть эту разницу (контейнер при наведении подсвечивается). Но такое везение бывает не всегда!
Для привычного нам размещения «текст слева направо, строчки сверху вниз», если элемент оказывается за пределами колонок грида — чаще всего это ошибка (хотя может быть и дизайнерским приемом). А вот создавать ряды автоматически по мере необходимости, продолжая грид вниз, бывает нужно сплошь и рядом.
Алгоритм авторазмещения: направление и «плотность упаковки» элементов
Примеры различия «с dense и без» есть в одной из первых статей о CSS-гридах в Рунете на css-live, а также в недавней статье. Еще немного подробностей будет ниже, в разделе про сами грид-элементы. Ну и совсем простенький наглядный пример всех 4 вариантов значений:
See the Pen LLxMjX by Ilya Streltsyn (@SelenIT) on CodePen.
Одно свойство, чтоб править всеми: grid
Способ указывать и грид области, и размеры всех грид-полос — явных и неявных, и алгоритм авторазмещения, всё сразу. Поэтому еще более запутанный, чем grid-template. И может принимать те же значения, что и grid-template (тогда неявные полосы и алгоритм авторазмещения будут по умолчанию, auto и row соответственно). Но очень удобен в простых случаях. Например, просто и быстро поделить контейнер на 4 колонки и 3 ряда:
Но вообще это свойство заслуживает отдельной статьи. Мы постараемся разобрать его в ближайшее время.
Промежутки между ячейками (грид-интервалы)
Если задать grid-gap одно значение, отступы между рядами и колонками будут равными:
В общем, почти как border-spacing для таблиц. Только бывает еще и в процентах. И добавляется только между полосами, снаружи крайних полос не добавляется.
Неинтуитивный момент: начало и конец грид-интервала считаются одной и той же грид-линией (этакая толстая линия, во весь интервал толщиной:). Можете еще раз посмотреть на это в первом примере (про терминологию).
Выравнивание и центрирование грид-полос в грид-контейнере
Можно посмотреть это на живом примере:
See the Pen dWYjKr by Ilya Streltsyn (@SelenIT) on CodePen.
Грид-элементы и их свойства
О способах размещения грид-элементов есть отдельная подробная статья одного из авторов реализации гридов в Chrome и Safari, с прекрасными иллюстрациями. Добавить к ней что-то новое сложно. Так что просто кратко перечислим, какие возможности есть.
Привязка грид-элемента к грид-линиям
Используем 4 свойства:
По умолчанию у них значение auto (находить место для элементов автоматически, об этом ниже). Можно привязывать элементы к грид-линиям по номеру (любому из двух — положительному, с начала, или отрицательному, с конца), по имени, по имени и номеру (если одноименных линий несколько, например, при repeat ). Бегло рассмотрим все три способа.
По номеру
Например, grid-row-start: 3; grid-row-end: 5 — поставить элемент между 3-й и 5-й линиями рядов (т.е. он будет занимать два ряда, 3-й и 4-й). То же самое — grid-row-start: 3; grid-row-end: span 2 (от третьей линии до второй по счету линии после начальной). Или grid-row-start: span 2; grid-row-end: 5 (от второй по счету линии перед конечной до пятой линии).
Это работает и с линиями неявного грида, только номер у них лишь один (у добавочных линий перед гридом — только отрицательный, у добавочных после — только положительный).
Примечание: во многих руководствах (и даже в нескольких местах спецификации!) говорится, что span указывает, сколько грид-полос занимает элемент. Для привязки по номерам линий это верно (и может быть даже нагляднее), но с именованными линиями это уже не так (см. ниже). На мой взгляд, надежнее всегда считать именно линии, с ними точно не запутаетесь.
По имени
Запись grid-row-end: span sidebar означает «охватить ряды вплоть до линии с именем sidebar » (если таких линий несколько — то до ближайшей из них, см. ниже).
По имени и номеру
Сокращенные свойства
Если указано только одно значение, оно считается начальным, а конечное обычно подставляется по умолчанию ( span 1 — до следующей линии после указанной, т.е. занять 1 полосу). Но если в структуре грида есть линии что-то-start и что-то-end (или, что то же самое, есть грид-область что-то ), то включается «магия» этих имен: grid-row: что-то превращается в grid-row: что-то-start / что-то-end (для grid-column аналогично). Не очень очевидно, но очень удобно! В примере ниже banner и menu — «волшебные» имена, а content (их 3 шт.) — обычные (хотя геометрически первая из них совпадает с banner-start ):
See the Pen jwVNMQ by Ilya Streltsyn (@SelenIT) on CodePen.
Размещение грид-элемента в грид-области
Здесь и пригодится grid-area с одним значением — именем грид-области. Неважно, присвоено ей это имя прямо (в свойстве grid-template-areas для грид-контейнера)…
Результат от способа задания имени грид области (слева — прямое, справа — косвенное), как видно в примере ниже, не зависит:
See the Pen JNpXom by Ilya Streltsyn (@SelenIT) on CodePen.
Автоматическое размещение грид-элементов
По умолчанию грид-элементы размещаются по одному, каждый следующий занимает ближайшую следующую свободную грид-область из достаточного количества грид-ячеек. Направление, в котором алгоритм ищет эту следующую область, определяется свойством grid-auto-flow контейнера.
При знакомстве с автоматическим размещением с плотной упаковкой ( dense ), наверное, у каждого верстальщика возникает мысль: «Что, теперь не нужны скрипты типа Masonry, и раскладку а-ля Pinterest можно делать чистым CSSом?». Увы: совсем заменить Masonry гриды пока не могут. Грид-элементы пока не умеют автоматически охватывать столько полос, сколько нужно, чтобы вместить их контент: ведь размеры полос сами могут зависеть от размеров элементов, и получается бич CSS — циклическая зависимость (обновлено 1.08.2021: вариант решения этой проблемы внесен в следующий уровень спецификации). Но мы можем расставить их динамически! Хотя бы простейшим скриптом, как в примере ниже (форке одного из примеров к самому Masonry):
Откройте его в отдельной вкладке и посмотрите, что происходит при ресайзе окна. Вся логика скрипта заняла немногим больше строчек, чем одно лишь подключение Masonry в оригинале!
Важное замечание: но всё же не стоит слишком увлекаться таким приемом для очень длинных страниц, особенно с «бесконечным скроллингом». Максимальное количество рядов в гридах в браузерах ограничено, если их станет больше 1000 — могут быть проблемы.
Порядок грид-элементов
При явной привязке грид-элементов к линиям и/или областям их порядок значения не имеет. Куда что поставите, там то и будет. Порядок влияет только на наложение грид-элементов, если их грид-области пересекаются (см. ниже).
Выравнивание и центрирование грид-элемента в грид-области
Грид-элементы можно выравнивать (в т.ч. центрировать) в своих грид-ячейках или грид-областях всеми свойствами для выравнивания (из модуля CSS Box Alignment). Используются свойства justify-items/align-items для контейнера (выравнивают все элементы сразу) или justify-self/align-self для самого элемента (выравнивает конкретно его), во многом аналогично выравниванию флекс-элементов во флекс-контейнере. Подробнее о них — в отдельной статье. Можно поиграть с ними и в живом примере:
See the Pen GmKMyp by Ilya Streltsyn (@SelenIT) on CodePen.
По умолчанию, если ничего не делать, грид-элементы растягиваются ( stretch ) на всю область по обеим осям. Наверное, чаще всего именно это и нужно.
Наложение грид-элементов
Если несколько грид-элементов размещены в одной грид-области/ячейке, они могут накладываться друг на друга. Порядком наложения можно управлять с помощью z-index — совсем как для позиционированных элементов.
Вы могли заметить это в самом первом примере в статье, при наведении на термины вверху (можно вернуться и посмотреть еще раз:).
Песочницы
Любую новую технологию проще осваивать «методом тыка», на удобном тренажере. Но сделать свою «песочницу» для гридов по образцу «песочницы» для флексбоксов из визуального руководства по ним оказалось не так-то просто: в гридах, в отличие от флексбоксов, грид-области существуют независимо от грид-элементов, так что их нужно визуализировать отдельно. Возможно, то, что получилось, тоже окажется для вас чем-то полезным (особенно в сочетании с грид-инспектором из отладчика Firefox), но хочется большего (напр. наглядного визуального редактора структуры грида). Мы работаем над этим, так что следите за обновлениями сайта!:)
А пока, кроме вышеприведенной ссылки, «потыкать» гриды можно с помощью следующих ресурсов:
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!