Игра, похожая на тетрис, в виде гридов (сетки)
Иллюстрация: Кира Кустова

Гайд по grid

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

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

Секция статьи "Что такое гриды?"

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

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

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

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

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

Секция статьи "Основные термины"

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

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

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

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

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

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

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

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

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

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

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

Секция статьи "Свойства грид-контейнера"

display

Секция статьи "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

Секция статьи "grid-template-columns, grid-template-rows"

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

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

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

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

        
          
          .container {  display: grid;  grid-template-columns: [start] 140px [line2] 250px [line3] 40px [end];  grid-template-rows: [row1-start] 25rem [row1-end] 10vh [last];}
          .container {
  display: grid;
  grid-template-columns: [start] 140px [line2] 250px [line3] 40px [end];
  grid-template-rows: [row1-start] 25rem [row1-end] 10vh [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;
}

        
        
          
        
      

grid-auto-columns, grid-auto-rows

Секция статьи "grid-auto-columns, grid-auto-rows"

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

        
          
          .container {  display: grid;  grid-template-rows: 50px 150px;  grid-auto-rows: 15px;  gap: 10px;}.item {  background: lightblue;}.item:nth-child(n + 3) {  background: pink;}
          .container {
  display: grid;
  grid-template-rows: 50px 150px;
  grid-auto-rows: 15px;
  gap: 10px;
}

.item {
  background: lightblue;
}

.item:nth-child(n + 3) {
  background: pink;
}

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

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

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

        
          
          .container {  display: grid;  grid-template-columns: 50px 150px;  grid-auto-columns: 15px 25px 5px;  grid-auto-flow: column;  gap: 10px;}.item {  min-height: 50px;  background: lightblue;}.item:nth-child(n + 3) {  background: pink;}
          .container {
  display: grid;
  grid-template-columns: 50px 150px;
  grid-auto-columns: 15px 25px 5px;
  grid-auto-flow: column;
  gap: 10px;
}

.item {
  min-height: 50px;
  background: lightblue;
}

.item:nth-child(n + 3) {
  background: pink;
}

        
        
          
        
      

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

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

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

grid-auto-flow

Секция статьи "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: 10px;  /* Для красоты */  padding: 10px;  background: #f1f1f1;}.item {  min-height: 50px;  text-align: center;  padding: 20px 0;  font-size: 30px;  line-height: 1;  background: lightblue;}.item3 {  /* Занимает один ряд и  растягивается на две колонки */  grid-column: span 2;  background: pink;}
          .container {
  display: grid;
  /* Три колонки */
  grid-template-columns: auto auto auto;
  /* Два ряда */
  grid-template-rows: auto auto;
  /* Автоматическое размещение в ряд */
  grid-auto-flow: row;
  /* Отступы между ячейками */
  gap: 10px;

  /* Для красоты */
  padding: 10px;
  background: #f1f1f1;
}

.item {
  min-height: 50px;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  line-height: 1;
  background: lightblue;
}

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

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

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

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

        
          
          .container {  grid-template-columns: auto auto auto;  /* Автоматическое размещение в ряд */  grid-auto-flow: row dense;}
          .container {
  grid-template-columns: auto auto auto;
  /* Автоматическое размещение в ряд */
  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-template-areas"

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

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

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

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

        
          
          .container {  display: grid;  grid-template-columns: 1fr 200px 1fr;  grid-template-rows: repeat(4, 150px);  grid-template-areas:    "header header header"    "content content 👾"    "content content ."    "footer footer footer";}.item1 {  grid-area: header;  background-color: purple;}.item2 {  grid-area: content;  background-color: gray;}.item3 {  grid-area: 👾;  background-color: pink;}.item4 {  grid-area: footer;  background-color: #bada55;}
          .container {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: repeat(4, 150px);
  grid-template-areas:
    "header header header"
    "content content 👾"
    "content content ."
    "footer footer footer";
}

.item1 {
  grid-area: header;
  background-color: purple;
}

.item2 {
  grid-area: content;
  background-color: gray;
}

.item3 {
  grid-area: 👾;
  background-color: pink;
}

.item4 {
  grid-area: footer;
  background-color: #bada55;
}

        
        
          
        
      

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

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

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

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

grid-template

Секция статьи "grid-template"

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

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

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

        
        
          
        
      

В этом же свойстве можно задавать значение и для свойства 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";
}

        
        
          
        
      

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

column-gap, row-gap

Секция статьи "column-gap, row-gap"

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

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

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

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

gap

Секция статьи "gap"

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

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

        
        
          
        
      

justify-items

Секция статьи "justify-items"

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

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

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

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

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

  justify-items: start;
}

        
        
          
        
      
Пример реализации свойства 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

Секция статьи "align-items"

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

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

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

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

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

  align-items: start;
}

        
        
          
        
      
Пример реализации свойства 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.

place-items

Секция статьи "place-items"

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

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

        
        
          
        
      

grid

Секция статьи "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

Секция статьи "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, 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: third-line / 4;}
          .item1 {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

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

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

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

grid-area

Секция статьи "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-self"

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

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

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

.item1 {
  justify-self: center;
}

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

align-self

Секция статьи "align-self"

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

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

.item1 {
  align-self: start;
}

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

place-self

Секция статьи "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() при условии, что анимируются аналогичные значения.

Ссылки

Секция статьи "Ссылки"
  1. A Complete Guide to Grid
  2. Grid Cheatsheet
  3. Grid Garden
  4. GRID cheat sheet
  5. Learning CSS Grid
  6. Animating CSS Grid Layout properties

На практике

Секция статьи "На практике"

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

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

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

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

Секция статьи "На собеседовании"

Это партнёрская рубрика, мы выпускаем её совместно с сервисом онлайн-образования Яндекс Практикум. Приносите вопрос, на который не знаете ответа, в задачи, мы разложим всё по полочкам и опубликуем. Если знаете ответ, присылайте пулреквест на GitHub.

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.