Гайд по grid

Полный список свойств для создания раскладки на гридах и управления ею.

Время чтения: больше 15 мин

Что такое гриды?

Скопировано

CSS Grid Layout (спецификация) или просто гриды — это удобная технология для раскладки элементов на веб-страницах. В отличие от флексбоксов, одновременно работающих только с одним измерением, гриды дают возможность работать одновременно с двумя: горизонталью и вертикалью.

На заре веба для создания раскладки поинтереснее одноколоночной часто использовались таблицы. Но проблема была в том, что таблицы были сделаны не для этого. Даже если отбросить семантическую нагруженность этого элемента, отдельные свойства для стилизации были крайне неудобными. По сути, это был костыль за неимением более удобных способов. Гриды же изначально были придуманы и реализованы как инструмент для создания раскладки.

Принцип работы гридов чем-то похож на таблицы. Вместо работы только с рядами или только с колонками с помощью гридов можно работать с так называемыми грид-ячейками, позиционируя элементы по вертикали и горизонтали одновременно.

В этом гайде описаны только самые используемые и устоявшиеся свойства, а не все возможные. Так как технология сейчас в стадии активного развития и внедрения, что-то в ней может меняться. Пожалуйста, обращайтесь к спецификации, если не нашли чего-то в этом гайде.

Основные термины

Скопировано

Грид-контейнер: родительский элемент, к которому применяется свойство display: grid.

Грид-элемент: дочерний элемент, прямой потомок грид-контейнера. Подчиняется правилам раскладки гридов.

Грид-линия: разделительная линия, формирующая структуру грида. Может быть как вертикальной (грид-линия колонки), так и горизонтальной (грид-линия ряда). Располагается по обе стороны от колонки или ряда. Используется для привязки грид-элементов.

Схематичный вид грид-линии колонки. — Синяя линия — грид-линия колонки.

Грид-ячейка: пространство между соседними грид-линиями. Единица грид-сетки.

Схематичный вид грид-ячейки между первой и второй грид-линиями ряда и второй и третьей грид-линиями колонки. — Грид-ячейка — между первой и второй грид-линиями ряда и второй и третьей грид-линиями колонки.

Грид-полоса: пространство между двумя соседними грид-линиями. Может быть проще думать о грид-полосе как о ряде или колонке.

Схематичный вид горизонтальной грид-полосы между первой и второй грид-линиями ряда. — Горизонтальная грид-полоса между первой и второй грид-линиями ряда.

Грид-область: область, ограниченная четырьмя грид-линиями. Может состоять из любого количества ячеек как по горизонтали, так и по вертикали.

Схематичный вид грид-области между первой и третьей грид-линиями ряда и первой и третьей грид-линиями колонки. — Грид-область между первой и третьей грид-линиями ряда и первой и второй грид-линиями колонки.

Свойства грид-контейнера

Скопировано

`display`

Скопировано

        
          
          .container {  display: grid;}
          .container {
  display: grid;
}

Если элементу задано свойство display со значением grid, то такой элемент становится грид-контейнером. Дочерние элементы этого контейнера начинают подчиняться правилам грид-раскладки. Снаружи грид-контейнер ведёт себя как блок.

        
          
          .container {  display: inline-grid;}
          .container {
  display: inline-grid;
}

Практически аналогичное предыдущему значению — за тем исключением, что снаружи грид-контейнер, созданный с помощью inline-grid, будет вести себя как строчный элемент.

`grid-template-columns`, `grid-template-rows`

Скопировано

Свойства, задающие размеры и количество колонок или рядов грид-раскладки соответственно.

        
          
          .container {  display: grid;  /* Будет создано 3 колонки */  grid-template-columns: 150px auto 40%;  /* Будет создано 3 ряда */  grid-template-rows: 250px 10vw 15rem;}
          .container {
  display: grid;
  /* Будет создано 3 колонки */
  grid-template-columns: 150px auto 40%;
  /* Будет создано 3 ряда */
  grid-template-rows: 250px 10vw 15rem;
}

Пример реализации свойств grid-template-columns, grid-template-rows.

Можно явно именовать грид-линии, используя для этого квадратные скобки:

        
          
          .container {  display: grid;  grid-template-columns: [start] 250px [line2] 400px [line3] 600px [end];  grid-template-rows: [row1-start] 15rem [row1-end] 30vh [last];}
          .container {
  display: grid;
  grid-template-columns: [start] 250px [line2] 400px [line3] 600px [end];
  grid-template-rows: [row1-start] 15rem [row1-end] 30vh [last];
}

Пример реализации свойств grid-template-columns, grid-template-rows с использованием именования грид-линий с помощью квадратных скобок.

Каждая линия может иметь больше одного имени. Это чем-то похоже на классы в HTML — вы можете задать элементу больше одного класса. Тут аналогичная ситуация. Например, такой код будет совершенно валиден, у второй и третьей грид-линий колонки по два имени:

        
          
          .container {  display: grid;  grid-template-columns: [start] 140px [line2 col2-start] 250px [col2-end end];  grid-template-rows: [row1-start] 25rem [row1-end] 10vh [last];}
          .container {
  display: grid;
  grid-template-columns: [start] 140px [line2 col2-start] 250px [col2-end end];
  grid-template-rows: [row1-start] 25rem [row1-end] 10vh [last];
}

Если нужны одинаковые колонки или ряды, то можно воспользоваться функцией repeat().

Будет создано 3 колонки по 250 пикселей:

        
          
          .container {  display: grid;  grid-template-columns: repeat(3, 250px);}
          .container {
  display: grid;
  grid-template-columns: repeat(3, 250px);
}

С появлением гридов у нас появилась и новая единица измерения: fr 🦊

fr (от fraction — доля, часть) отвечает за свободное пространство внутри грид-контейнера.

Например, этот код создаст три колонки, каждая из которых будет занимать 1/3 ширины родителя:

        
          
          .container {  display: grid;  grid-template-columns: repeat(3, 1fr);}
          .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Что аналогично записи:

        
          
          .container {  display: grid;  grid-template-columns: 1fr 1fr 1fr;}
          .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Свободное пространство рассчитывается после того, как место отдано всем фиксированным размерам. К примеру, в коде ниже сначала будет создана колонка шириной 200 пикселей, а затем свободное пространство — ширина родителя минус 200 пикселей — будет поделено между остальными колонками. Каждая будет занимать ширину (100% - 200px) / 2:

        
          
          .container {  display: grid;  grid-template-columns: 1fr 200px 1fr;}
          .container {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
}

`auto-fill` и `auto-fit`

Скопировано

В тех случаях, когда количество колонок или строк не известно для свойств grid-template-columns и grid-template-rows можно установить значения auto-fill или auto-fit в формате:

        
          
          .container {  grid-template-columns: repeat(/* auto-fill или auto-fit */, /* размер колонки */);}
          .container {
  grid-template-columns: repeat(/* auto-fill или auto-fit */, /* размер колонки */);
}

Оба эти параметра (auto-fill и auto-fit) автоматически добавляют в грид-сетку из примера выше колонки. Но эти колонки ведут себя немного по-разному:

auto-fill стремится заполнить колонками всё доступное пространство, а когда элементы заканчиваются, создаёт пустые колонки, равномерно распределяя доступную область между существующими и «виртуальными» колонками.
auto-fit действует похожим образом, но, схлопывает пустые колонки и отдаёт больше места под заполненные.

Аналогично можно использовать для создания рядов.

`grid-auto-columns`, `grid-auto-rows`

Скопировано

Если элементов внутри грид-контейнера больше, чем может поместиться в заданные явно ряды и колонки, то для них создаются автоматические, неявные ряды и колонки. При помощи свойств grid-auto-columns и grid-auto-rows можно управлять размерами этих автоматических рядов и колонок.

        
          
          .container {  display: grid;  grid-template-rows: 50px 140px;  grid-auto-rows: 40px;  gap: 20px;}
          .container {
  display: grid;
  grid-template-rows: 50px 140px;
  grid-auto-rows: 40px;
  gap: 20px;
}

Пример реализации свойств grid-auto-columns, grid-auto-rows.

В этом примере создаются два явных ряда размером 50 и 140 пикселей. Элементы, начиная с третьего, в эти два ряда не помещаются, и для них создаются автоматические ряды. При помощи свойства grid-auto-rows мы указываем, что автоматические ряды должны иметь размер 40 пикселей.

Можно задавать больше одного значения для автоматических колонок или рядов. Тогда паттерн размера будет повторяться до тех пор, пока не кончатся грид-элементы.

        
          
          .container {  display: grid;  grid-template-columns: 200px 500px;  grid-auto-columns: 75px 100px 50px;  grid-auto-flow: column;  gap: 20px;}
          .container {
  display: grid;
  grid-template-columns: 200px 500px;
  grid-auto-columns: 75px 100px 50px;
  grid-auto-flow: column;
  gap: 20px;
}

Важно указать при помощи grid-auto-flow: column, что элементы должны вставать в колонки, чтобы элементы без контента были видны.

Пример реализации свойств grid-auto-columns, grid-auto-rows с разными размерами колонок.

Как видите, автоматически создаются колонки размером 75, 100 и затем 50 пикселей. И так до тех пор, пока элементы не закончатся.

`grid-auto-flow`

Скопировано

Если грид-элементов больше, чем явно объявленных колонок или рядов, то они автоматически размещаются внутри родителя. А вот каким образом — в ряд или в колонку — можно указать при помощи свойства grid-auto-flow. По умолчанию значение у этого свойства row, лишние элементы будут выстраиваться в ряды в рамках явно заданных колонок.

Возможные значения:

row (значение по умолчанию) — автоматически размещаемые элементы выстраиваются в ряды.
column — автоматически размещаемые элементы выстраиваются в колонки.
dense — браузер старается заполнить дырки (пустые ячейки) в разметке, если размеры элементов позволяют. Можно сочетать с остальными значениями.

Принципы работы этого свойства удобнее всего изучать на примере, когда есть большой блок, который не помещается в одну грид-ячейку.

        
          
          .container {  display: grid;  /* Три колонки */  grid-template-columns: auto auto auto;  /* Два ряда */  grid-template-rows: auto auto;  /* Автоматическое размещение в ряд */  grid-auto-flow: row;  /* Отступы между ячейками */  gap: 20px;}.item3 {  /* Занимает один ряд и  растягивается на две колонки */  grid-column: span 2;}
          .container {
  display: grid;
  /* Три колонки */
  grid-template-columns: auto auto auto;
  /* Два ряда */
  grid-template-rows: auto auto;
  /* Автоматическое размещение в ряд */
  grid-auto-flow: row;
  /* Отступы между ячейками */
  gap: 20px;
}

.item3 {
  /* Занимает один ряд и
  растягивается на две колонки */
  grid-column: span 2;
}

Пример реализации свойства grid-auto-flow со значением row

Как видите, третий элемент не поместился в последнюю ячейку первого ряда и был перенесён в следующий ряд. Следующий за ним четвёртый элемент встал в ближайшую доступную ячейку во втором ряду.

Добавим к значению свойства grid-auto-flow слово dense:

        
          
          .container {  /* Автоматическое размещение в ряд */  grid-auto-flow: row dense;}
          .container {
  /* Автоматическое размещение в ряд */
  grid-auto-flow: row dense;
}

Пример реализации свойства grid-auto-flow со значением row dense.

Теперь четвёртый элемент встал в ряд, но занял при этом пустую ячейку в первом ряду. Браузер старается закрыть все дырки в сетке, переставляя подходящие элементы на свободные места.

Посмотрим пример со значением column:

        
          
          .container {  grid-template-columns: auto auto;  grid-template-rows: auto auto auto;  /* Автоматическое размещение в колонку */  grid-auto-flow: column;}.item3 {  grid-row: span 2;}
          .container {
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto;
  /* Автоматическое размещение в колонку */
  grid-auto-flow: column;
}

.item3 {
  grid-row: span 2;
}

Пример реализации свойства grid-auto-flow со значением column.

Видим аналогичную картину: третий элемент не поместился в последнюю ячейку первой колонки и встал во вторую колонку. Следующий за ним четвёртый элемент встал ниже во второй колонке.

Добавим dense к текущему значению:

        
          
          .container {  /* Автоматическое размещение в ряд */  grid-auto-flow: column dense;}
          .container {
  /* Автоматическое размещение в ряд */
  grid-auto-flow: column dense;
}

Пример реализации свойства grid-auto-flow со значением column dense.

В результате четвёртый элемент занял пустую ячейку в первой колонке.

`grid-template-areas`

Скопировано

Позволяет задать шаблон сетки расположения элементов внутри грид-контейнера. Имена областей задаются при помощи свойства grid-area. Текущее свойство grid-template-areas просто указывает, где должны располагаться эти грид-области.

Возможные значения:

none (значение по умолчанию) — области сетки не задано имя.
. — означает пустую ячейку.
название — название области, может быть абсолютно любым словом или даже эмодзи! 🤯

Обратите внимание, что нужно называть каждую из ячеек. Например, если шапка или подвал нашего сайта будут занимать все три существующие колонки, то нужно будет трижды написать названия этих областей. Удобнее всего будет подписывать области в виде некой таблицы. Подобный способ записи чем-то похож на таблицы в Markdown:

        
          
          .container {  display: grid;  grid-template-columns: repeat(3, 500px);  grid-template-rows: repeat(4, 1fr);  grid-template-areas:    "header header header"    "content content 👾"    "content content ."    "footer footer footer";}.item1 {  grid-area: header;}.item2 {  grid-area: content;}.item3 {  grid-area: 👾;}.item4 {  grid-area: footer;}
          .container {
  display: grid;
  grid-template-columns: repeat(3, 500px);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    "header header header"
    "content content 👾"
    "content content ."
    "footer footer footer";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: content;
}

.item3 {
  grid-area: 👾;
}

.item4 {
  grid-area: footer;
}

Обратите внимание, что между строками не ставятся запятые или какие-то другие символы, имена разделяются пробелами.

Получится такая раскладка:

Имена областей должны разделяться пробелами. Это важно, особенно в том случае, если вы хотите расположить две пустых ячейки рядом. Разделите точки пробелами, иначе браузер подумает, что это одна пустая ячейка.

`grid-template`

Скопировано

Свойство-шорткат для свойств grid-template-rows, grid-template-columns. Позволяет записать все значения в одну строку. Главное после этого не запутаться при чтении 😅

Можно прописать все колонки и ряды сразу, разделяя их слэшем /. Сперва идут ряды, а затем колонки, не перепутайте!

        
          
          .container {  display: grid;  grid-template: repeat(4, 1fr) / repeat(3, 500px);}
          .container {
  display: grid;
  grid-template: repeat(4, 1fr) / repeat(3, 500px);
}

В этом же свойстве можно задавать значение и для свойства grid-template-areas, но тогда код превращается в кашу и становится совершенно нечитабельным. Лучше всё же использовать это свойство отдельно:

Лучше так?

        
          
          .container {  display: grid;  grid-template:    [row1-start] "header header header" 25px [row1-end]    [row2-start] "footer footer footer" 25px [row2-end]    / auto 50px auto;}
          .container {
  display: grid;
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

Или так?

        
          
          .container {  display: grid;  grid-template:    [row1-start] 25px [row1-end]    [row2-start] 25px [row2-end]    / auto 50px auto;  grid-template-areas:    "header header header"    "footer footer footer";}
          .container {
  display: grid;
  grid-template:
    [row1-start] 25px [row1-end]
    [row2-start] 25px [row2-end]
    / auto 50px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

Но техническая возможность есть, выбирать вам! 😉

`row-gap`, `column-gap`

Скопировано

Задают отступы между рядами или колонками.

        
          
          .container {  display: grid;  grid-template-columns: 1fr 350px 1fr;  grid-template-rows: repeat(3, 150px);  /* Отступы между рядами */  row-gap: 50px;  /* Отступы между колонками */  column-gap: 20px;}
          .container {
  display: grid;
  grid-template-columns: 1fr 350px 1fr;
  grid-template-rows: repeat(3, 150px);
  /* Отступы между рядами */
  row-gap: 50px;
  /* Отступы между колонками */
  column-gap: 20px;
}

Пример реализации свойств column-gap и row-gap.

В инспекторе отступы заштриховываются, так их можно отличить от грид-элементов. В этом примере между рядами отступы по 50 пикселей, а между колонками — по 20 пикселей.

`gap`

Скопировано

Шорткат для записи значений свойств row-gap и column-gap. Значения разделяются пробелом:

        
          
          .container {  display: grid;  grid-template-columns: 1fr 350px 1fr;  grid-template-rows: repeat(3, 150px);  gap: 50px 20px;}
          .container {
  display: grid;
  grid-template-columns: 1fr 350px 1fr;
  grid-template-rows: repeat(3, 150px);
  gap: 50px 20px;
}

`justify-content`

Скопировано

Свойство, с помощью которого можно выровнять элементы вдоль оси строки. Данное свойство работает, только если общая ширина столбцов меньше ширины контейнера сетки. Другими словами, вам нужно свободное пространство вдоль оси строки контейнера, чтобы выровнять его столбцы слева или справа.

Возможные значения:

start — выравнивает сетку по левой стороне грид-контейнера.

        
          
          .container {  display: grid;  grid-template-columns: repeat(3, 300px);  gap: 20px;  justify-content: start;}
          .container {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 20px;

  justify-content: start;
}

Пример реализации свойства justify-content со значением start.

end — выравнивает сетку по правой стороне грид-контейнера.

        
          
          .container {  display: grid;  grid-template-columns: repeat(3, 300px);  gap: 20px;  justify-content: end;}
          .container {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 20px;

  justify-content: end;
}

Пример реализации свойства justify-content со значением end.

center — выравнивает сетку по центру грид-контейнера.

        
          
          .container {  display: grid;  grid-template-columns: repeat(3, 300px);  gap: 20px;  justify-content: center;}
          .container {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 20px;

  justify-content: center;
}

Пример реализации свойства justify-content со значением center.

stretch — масштабирует элементы, чтобы сетка могла заполнить всю ширину грид-контейнера.

        
          
          .container {  display: grid;  grid-template-columns: 1fr 1fr 1fr;  gap: 20px;  justify-content: stretch;}
          .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;

  justify-content: stretch;
}

Пример реализации свойства justify-content со значением stretch.

space-around — одинаковое пространство между элементами и полуразмерные отступы по краям.

        
          
          .container {  display: grid;  grid-template-columns: repeat(3, 300px);  gap: 20px;  justify-content: space-around;}
          .container {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 20px;

  justify-content: space-around;
}

Пример реализации свойства justify-content со значением space-around.

space-evenly — одинаковое пространство между элементами и полноразмерные отступы по краям.

        
          
          .container {  display: grid;  grid-template-columns: repeat(3, 300px);  gap: 20px;  justify-content: space-evenly;}
          .container {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 20px;

  justify-content: space-evenly;
}

Пример реализации свойства justify-content со значением space-evenly.

space-between — одинаковое пространство между элементами без отступов по краям.

        
          
          .container {  display: grid;  grid-template-columns: repeat(3, 300px);  gap: 20px;  justify-content: space-between;}
          .container {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  gap: 20px;

  justify-content: space-between;
}

Пример реализации свойства justify-content со значением space-between.

`justify-items`

Скопировано

Свойство, с помощью которого задаётся выравнивание грид-элементов по горизонтальной оси. Применяется ко всем элементам внутри грид-родителя.

Возможные значения:

start — выравнивает элемент по начальной (левой для LTR) линии.

        
          
          .container {  display: grid;  grid-template-columns: 1fr 400px 1fr;  grid-template-rows: repeat(3, 170px);  gap: 20px;  justify-items: start;}.item {  min-width: 300px;}
          .container {
  display: grid;
  grid-template-columns: 1fr 400px 1fr;
  grid-template-rows: repeat(3, 170px);
  gap: 20px;

  justify-items: start;
}

.item {
  min-width: 300px;
}

Пример реализации свойства justify-items со значением start.

end — выравнивает элемент по конечной (правой для LTR) линии.

        
          
          .container {  justify-items: end;}
          .container {
  justify-items: end;
}

Пример реализации свойства justify-items со значением end.

center — выравнивает элемент по центру грид-ячейки.

        
          
          .container {  justify-items: center;}
          .container {
  justify-items: center;
}

Пример реализации свойства justify-items со значением center.

stretch — растягивает элемент на всю ширину грид-ячейки, при условии, что у него не задана фиксированная ширина.

        
          
          .container {  justify-items: stretch;}
          .container {
  justify-items: stretch;
}

Пример реализации свойства justify-items со значением stretch.

Можно управлять выравниванием отдельных грид-элементов при помощи свойства justify-self.

`align-items`

Скопировано

Свойство, с помощью которого можно выровнять элементы по вертикальной оси внутри грид-контейнера.

Возможные значения:

start — выравнивает элемент по начальной (верхней) линии.

        
          
          .container {  display: grid;  grid-template-columns: 1fr 400px 1fr;  grid-template-rows: repeat(3, 170px);  gap: 20px;  align-items: start;}.item {  min-height: 100px;}
          .container {
  display: grid;
  grid-template-columns: 1fr 400px 1fr;
  grid-template-rows: repeat(3, 170px);
  gap: 20px;

  align-items: start;
}

.item {
  min-height: 100px;
}

Пример реализации свойства align-items со значением start.

end — выравнивает элемент по конечной (нижней) линии.

        
          
          .container {  align-items: end;}
          .container {
  align-items: end;
}

Пример реализации свойства align-items со значением end.

center — выравнивает элемент по центру грид-ячейки.

        
          
          .container {  align-items: center;}
          .container {
  align-items: center;
}

Пример реализации свойства align-items со значением center.

stretch — растягивает элемент на всю высоту грид-ячейки.

        
          
          .container {  align-items: stretch;}
          .container {
  align-items: stretch;
}

Пример реализации свойства align-items со значением stretch.

Можно также управлять выравниванием отдельных грид-элементов при помощи свойства align-self.

`place-items`

Скопировано

Шорткат для указания значений сразу и для align-items и для justify-items. Указывать нужно именно в таком порядке.

        
          
          .container {  display: grid;  place-items: stretch end;}
          .container {
  display: grid;
  place-items: stretch end;
}

`grid`

Скопировано

Мегашорткат, позволяющий задать значения всему и сразу. А конкретно с его помощью можно указать значения для следующих свойств:

grid-template-rows;
grid-template-columns;
grid-template-areas;
grid-auto-rows;
grid-auto-columns;
grid-auto-flow.

Перед тем как соблазниться возможностью расписать всё в одном свойстве, дважды (а то и трижды) подумайте о читабельности кода. Учтите и то, что гриды относительно новая и не такая уж простая технология. Не каждый коллега сможет прочесть этот шорткат.

Возможные значения:

none — значение по умолчанию. Это ключевое слово сбрасывает значения для всех свойств, входящих в этот шорткат.

        
          
          .container {  display: grid;  grid: none;}
          .container {
  display: grid;
  grid: none;
}

Можно указать допустимые значения для шортката grid-template:

        
          
          .container {  display: grid;  grid: repeat(4, 150px) / 1fr 200px 1fr;}
          .container {
  display: grid;
  grid: repeat(4, 150px) / 1fr 200px 1fr;
}

В том числе можно указать имена линий:

        
          
          .container {  display: grid;  grid:    [row1-start] 25px [row1-end row2-start] 25px [row2-end]    / auto 50px auto;}
          .container {
  display: grid;
  grid:
    [row1-start] 25px [row1-end row2-start] 25px [row2-end]
    / auto 50px auto;
}

Можно задать размеры колонок и рядов. Создадим два ряда и две колонки:

        
          
          .container {  display: grid;  grid: 200px 100px / 30% 30%;}
          .container {
  display: grid;
  grid: 200px 100px / 30% 30%;
}

auto-flow — это ключевое слово даёт браузеру понять, что создавать при необходимости: колонки или ряды.

Если auto-flow стоит справа от слэша, то будут создаваться автоматические колонки:

        
          
          .container {  display: grid;  grid: 200px 100px / auto-flow 30%;}
          .container {
  display: grid;
  grid: 200px 100px / auto-flow 30%;
}

Если auto-flow стоит слева от слэша, то будут создаваться автоматические ряды:

        
          
          .container {  display: grid;  grid: auto-flow 30% / 200px 100px;}
          .container {
  display: grid;
  grid: auto-flow 30% / 200px 100px;
}

dense — к ключевому слову auto-flow можно добавить dense. Это укажет браузеру, что элементы должны стараться заполнить свободные ячейки. Подробнее про работу этого ключевого слова можно почитать в статье про grid-auto-flow.

Важно ставить это слово сразу после auto-flow:

        
          
          .container {  display: grid;  grid:  auto-flow dense 30% / 200px 100px;}
          .container {
  display: grid;
  grid:  auto-flow dense 30% / 200px 100px;
}

Ниже будет несколько примеров с блоками кода, которые делают одно и то же, в первом случае через шорткат, во втором — как обычно.

Задаёт размеры и количество колонок и рядов:

        
          
          .container {  grid: 50px 150px / 2fr 1fr;}.container {  grid-template-rows: 50px 150px;  grid-template-columns: 2fr 1fr;}
          .container {
  grid: 50px 150px / 2fr 1fr;
}

.container {
  grid-template-rows: 50px 150px;
  grid-template-columns: 2fr 1fr;
}

Задаёт размеры и количество рядов, а также автоматические колонки:

        
          
          .container {  grid: 200px 1fr / auto-flow 200px;}.container {  grid-auto-flow: column;  grid-template-rows: 200px 1fr;  grid-auto-columns: 200px;}
          .container {
  grid: 200px 1fr / auto-flow 200px;
}

.container {
  grid-auto-flow: column;
  grid-template-rows: 200px 1fr;
  grid-auto-columns: 200px;
}

Задаёт размеры и количество рядов, автоматические колонки и распределение dense:

        
          
          .container {  grid: auto-flow dense 300px / 2fr 3fr;}.container {  grid-auto-flow: row dense;  grid-auto-rows: 300px;  grid-template-columns: 2fr 3fr;}
          .container {
  grid: auto-flow dense 300px / 2fr 3fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 300px;
  grid-template-columns: 2fr 3fr;
}

Возможны и более сложные комбинации значений этого свойства. Например, можно сразу задать имена областям:

        
          
          .container {  grid:    [row1-start] "header header header" 1fr [row1-end]    [row2-start] "footer footer footer" 25px [row2-end]    / auto 50px auto;}
          .container {
  grid:
    [row1-start] "header header header" 1fr [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

Что соответствует такому коду:

        
          
          .container {  grid-template-areas:    "header header header"    "footer footer footer";  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];  grid-template-columns: auto 50px auto;}
          .container {
  grid-template-areas:
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
}

Свойства грид-элементов

Скопировано

Важное замечание: свойства float, display: inline-block, display: table-cell, vertical-align и column-* не дают никакого эффекта, когда применяются к грид-элементам.

`grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end`

Скопировано

Определяют положение элемента внутри грид-сетки при помощи указания на конкретные направляющие линии.

Возможные значения:

название или номер линии — может быть порядковым номером или названием конкретной линии.
span число — элемент растянется на указанное количество ячеек.
span имя — элемент будет растягиваться до следующей указанной линии.
auto — означает автоматическое размещение, автоматический диапазон клеток или дефолтное растягивание элемента, равное одному.

        
          
          .container {  display: grid;  grid-template-columns: [one] 1fr [two] 1fr [three] 1fr [four] 1fr [five] 1fr [six];  grid-template-rows: [row1-start] 1fr [row1-end] 1fr 1fr;}.item1 {  grid-column-start: 2;  grid-column-end: five;  grid-row-start: row1-start;  grid-row-end: 3;}
          .container {
  display: grid;
  grid-template-columns: [one] 1fr [two] 1fr [three] 1fr [four] 1fr [five] 1fr [six];
  grid-template-rows: [row1-start] 1fr [row1-end] 1fr 1fr;
}

.item1 {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

Пример реализации свойств grid-column-start, grid-column-end, grid-row-start, grid-row-end с первым вариантом значений.

Элемент разместился по горизонтали от второй грид-линии до линии с названием [five], а по вертикали — от линии с именем [row1-start] до линии под номером 3.

        
          
          .container {  display: grid;  grid-template-columns: [first] 1fr [line2] 1fr [line3] 1fr [col4-start] 1fr [five] 1fr [end];  grid-template-rows: [row1-start] 1fr [row1-end] 1fr [third-line] 1fr [last-line];}.item1 {  grid-column-start: 1;  grid-column-end: span col4-start;  grid-row-start: 2;  grid-row-end: span 2;}
          .container {
  display: grid;
  grid-template-columns: [first] 1fr [line2] 1fr [line3] 1fr [col4-start] 1fr [five] 1fr [end];
  grid-template-rows: [row1-start] 1fr [row1-end] 1fr [third-line] 1fr [last-line];
}

.item1 {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

Пример реализации свойств grid-column-start, grid-column-end, grid-row-start, grid-row-end со вторым вариантом значений.

Элемент расположился по вертикали от второй грид-линии и растянулся на две ячейки, а по горизонтали — от первой линии и растянулся до линии с названием [col4-start].

Если не указать значения для свойств grid-column-end и grid-row-end, то элемент по умолчанию будет размером в одну грид-ячейку.

Элементы могут перекрывать друг друга, накладываться друг на друга. Можно использовать свойство z-index для управления контекстом наложения.

`grid-column`, `grid-row`

Скопировано

Свойства-шорткаты для grid-column-start, grid-column-end и grid-row-start, grid-row-end соответственно.

Значения для *-start и *-end разделяются слэшем.

Можно использовать ключевое слово span, буквально говорящее «растянись на столько-то». А на сколько, указывает стоящая за ним цифра.

        
          
          .item1 {  grid-column: 3 / span 2;  grid-row: 3 / 4;}
          .item1 {
  grid-column: 3 / span 2;
  grid-row: 3 / 4;
}

Пример реализации свойств-шорткатов grid-column, grid-row.

Элемент начинается с третьей линии по горизонтали и растягивается на 2 ячейки. По вертикали элемент начинается от третьей линии и заканчивается у четвёртой линии.

Если опустить слэш и второе значение, то элемент будет размером в одну ячейку.

`grid-area`

Скопировано

Двуличное свойство 🧐, которое может как указывать элементу, какую из именованных областей ему нужно занять, так и служить шорткатом для одновременного указания значений для четырёх свойств: grid-column-start, grid-column-end, grid-row-start и grid-row-end.

Пример с указанием на именованную область:

        
          
          .item1 {  /* Займёт область content внутри грид-сетки */  grid-area: content;}
          .item1 {
  /* Займёт область content внутри грид-сетки */
  grid-area: content;
}

А теперь пример с указанием всех четырёх значений в строку. При таком указании значений есть скользкое место: значения указываются в таком порядке: row-start / column-start / row-end / column-end, то есть сначала указываем оба начала, а потом оба конца.

        
          
          .item2 {  grid-area: 1 / col4-start / last-line / 6;}
          .item2 {
  grid-area: 1 / col4-start / last-line / 6;
}

`justify-self`

Скопировано

С помощью этого свойства можно установить горизонтальное выравнивание для отдельного элемента, отличное от выравнивания, заданного грид-родителю.

Возможные значения аналогичны значениям свойства justify-items.

        
          
          .container {  justify-items: stretch;}.item1 {  justify-self: center;}
          .container {
  justify-items: stretch;
}

.item1 {
  justify-self: center;
}

Пример реализации свойства justify-self.

`align-self`

Скопировано

А это свойство, как нетрудно догадаться, выравнивает отдельный элемент по вертикальной оси. Возможные значения аналогичны значениям свойства align-items.

        
          
          .container {  align-items: stretch;}.item1 {  align-self: start;}
          .container {
  align-items: stretch;
}

.item1 {
  align-self: start;
}

`place-self`

Скопировано

Шорткат для одновременного указания значений свойствам justify-self и align-self.

Возможные значения:

auto (значение по умолчанию) — стандартное значение, можно использовать для сброса ранее заданных значений.
align-self justify-self — первое значение задаёт значение свойству align-self, второе значение устанавливает значение свойства justify-self. Если указано всего одно значение, то оно устанавливается для обоих свойств. Например, place-self: center отцентрирует элемент по горизонтальной и по вертикальной осям одновременно.

Специальные функции и ключевые слова

Скопировано

Когда вы задаёте размеры колонкам и рядам, вам доступны не только давно известные единицы измерения (px, vw, rem, % и так далее), но и очень крутые ключевые слова min-content, max-content и auto. И уже упомянутые единицы измерения fr.

Гриды подарили нам ещё одну волшебную функцию, позволяющую одновременно задавать минимальный и максимальный размер — minmax(). Например, в случае записи grid-template-columns: minmax(200px, 1fr); колонка займёт 1 часть свободного пространства грид-контейнера, но не меньше 200 пикселей.

Ещё одна полезная функция, появившаяся в гридах, это repeat(). Сэкономит вам кучу лишних букв и времени.

Анимация свойств

Скопировано

Для анимации доступны следующие свойства и их значения:

Значения свойств gap, row-gap, column-gap, указанные в единицах измерения, процентах или при помощи calc().
Значения свойств grid-template-columns, grid-template-rows, указанные в единицах измерения, процентах или при помощи функции calc() при условии, что анимируются аналогичные значения.

Ссылки

Скопировано

На практике

Скопировано

Балдин Кирилл советует

Скопировано

Грид выручит, когда нужно сверстать сложную сетку, которая меняется в зависимости от размеров экрана устройства. Возьмём пример с интерфейсом онлайн-магазина:

пример сетки с использованием гридов для десктоп — Сетка десктопа

пример сетки с использованием гридов для мобильной версии — Сетка мобильной версии

В мобильной версии нужно сильно поменять порядок отображения, а для SEO нужно сохранить определённый порядок.

В демо ниже используются именованные области для расположения элементов. При переключении на мобильную версию элементы перестраиваются в нужном порядке за счёт изменения расположения именованных областей

        
          
          .cart-product {  display: grid;  grid-template-columns: repeat(6, 1fr);  grid-template-rows: repeat(5, 1fr);  grid-template-areas:    "image       image       image         title        title    title"    "image       image       image         price        rating   rating"    "features    features    features      price        payment  payment"    "description description description   description  reviews  reviews  "    "shipping    contact     availability  availability warranty sizes"    "material    material    related       related      related  related";}@media (max-width: 720px) {  .cart-product {    grid-template-columns: repeat(4, 1fr);    grid-template-areas:      "image        image    price       rating"      "image        image    description description"      "title        title    title       title"      "reviews      reviews  features    features"      "availability payment  shipping    contact"      "warranty     warranty sizes       sizes"      "warranty     warranty sizes       sizes"      "material     material material    related";  }}
          .cart-product {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    "image       image       image         title        title    title"
    "image       image       image         price        rating   rating"
    "features    features    features      price        payment  payment"
    "description description description   description  reviews  reviews  "
    "shipping    contact     availability  availability warranty sizes"
    "material    material    related       related      related  related";
}

@media (max-width: 720px) {
  .cart-product {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "image        image    price       rating"
      "image        image    description description"
      "title        title    title       title"
      "reviews      reviews  features    features"
      "availability payment  shipping    contact"
      "warranty     warranty sizes       sizes"
      "warranty     warranty sizes       sizes"
      "material     material material    related";
  }
}

Открыть демо в новой вкладке

Балдин Кирилл — наставник на курсе «Мидл фронтенд-разработчик» в Яндекс Практикуме.

Алёна Батицкая советует

Скопировано

🛠 Самый удобный инструмент для инспектирования вёрстки на гридах на сегодня в браузере Firefox! Даже если в остальное время вы сидите в другом браузере, то на время вёрстки я настоятельно советую вам переключиться. Ничего удобнее человечество ещё не придумало 🤩

На собеседовании

Скопировано

Задать вопрос в рубрику

🤚 Я знаю ответ

Матвей Романов отвечает

Скопировано

Гриды являются лучшим выбором, когда у вас есть сложные проекты, требующие вёрстки с использованием двумерной компоновки. Эта система позволяет создавать вёрстку с сложным дизайном, который легко обслуживается и требует меньше усилий при поддержке и масштабировании. Кроме того, свойство gap упрощает определение отступов между элементами и использование его для создания перекрывающихся элементов. Если вы работаете над проектом впервые и хотите создавать структуру и дизайн будущей вёрстки с помощью гридов, то эта система будет очень полезной.

Во всех остальных случаях можно смело использовать флексбоксы.

Что такое гриды?

Основные термины

Свойства грид-контейнера

display

grid-template-columns, grid-template-rows

auto-fill и auto-fit

grid-auto-columns, grid-auto-rows

grid-auto-flow

grid-template-areas

grid-template

row-gap, column-gap

gap

justify-content

justify-items

align-items

place-items

grid

Свойства грид-элементов

grid-column-start, grid-column-end, grid-row-start, grid-row-end

grid-column, grid-row

grid-area

justify-self

align-self

place-self

Специальные функции и ключевые слова

Анимация свойств

Ссылки

На практике

Балдин Кирилл советует

Алёна Батицкая советует

На собеседовании

Матвей Романов отвечает

Читайте также

Гайд по flexbox

:has()

@media

`display`

`grid-template-columns`, `grid-template-rows`

`auto-fill` и `auto-fit`

`grid-auto-columns`, `grid-auto-rows`

`grid-auto-flow`

`grid-template-areas`

`grid-template`

`row-gap`, `column-gap`

`gap`

`justify-content`

`justify-items`

`align-items`

`place-items`

`grid`

`grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end`

`grid-column`, `grid-row`

`grid-area`

`justify-self`

`align-self`

`place-self`

`:has()`

`@media`