Как я запомнил свойства CSS Grid

Синтаксис CSS Grid достаточно сложен для запоминания, но если вы в нем разберетесь, то работать с ним будет очень просто, так как он вполне декларативен.

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

Группы свойств

В CSS Grid входят 4 большие группы свойств:

1. Явная сетка (explicit grid)
2. Промежутки (gaps)
3. Выравнивание элементов (aligning)
4. Неявная сетка (implicit grid)

Явная сетка

Предположим, вы хотите создать грид-разметку с четырьмя колонками и тремя рядами. Вы четко выделяете эти цифры: 4 колонки, 3 ряда. Это и есть явная сетка.

Если вы объявляете количество рядов и колонок, то сетка явная.

Для явной сетки вы можете использовать два свойства:

• grid-template-columns — количество колонок,
• grid-template-rows — количество рядов.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 3em 3em 3em;
}

See the Pen Explicit Grid properties by Zell Liew (@zellwk) on CodePen.

Откуда вы знаете, что там именно 4 колонки и 3 ряда?

Свойство grid-template-columns создает по одной колонке для каждого значения — а у нас четыре значения, каждое из которых равно 1fr. Это превратится в 4 колонки.

Свойство grid-template-rows работает точно так же для рядов. У нас три значения 3em, которые превратятся в 3 ряда.

Эти свойства могут также принимать значения в другом формате, с использованием функций repeat, autofill, autofit, minmax. Это уже немного сложнее, хотя смысл остается тот же — указание количества строк или рядов. Мы не будем разбирать эти значения.

Итак, запоминаем, что явную сетку можно создать с помощью двух свойств:

1. grid-template-columns — создает колонки,
2. grid-template-rows — создает ряды.

Позиционирование элементов в сетке

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

• grid-column
• grid-row

Они используются именно на дочерних элементах сетки, а не на контейнере.

grid-column позволяет выбрать, какие колонки занимает элемент. Это свойство на самом деле состоит из двух: grid-column-start (первая занятая колонка) и grid-column-end (последняя занятая колонка), но оба значения можно указывать сразу в grid-column:

/* Длинна запись */
.grid-item {
  grid-column-start: 1;
  grid-column-end: 3;
}

/* Короткая запись */
.grid-item {
  grid-column: 1 / 3;
}

А можно не указывать конкретные номера колонок, а указать, сколько колонок должен занимать элемент (ширину элемента) с помощью ключевого слова span.

.grid-item {
  grid-column-start: 1; /* Начинается с первой колонки */
  grid-column-end: span 2; /* Занимает две колонки */
}

See the Pen Positioning items (columns) by Zell Liew (@zellwk) on CodePen.

grid-row работает так же для рядов. Это свойство также состоит из двух: grid-row-start и grid-row-end.

/* Длинная запись */
.grid-item {
  grid-row-start: 1;
  grid-row-end: span 2;
}

/* Короткая запись */
.grid-item {
  grid-row: 1 / span 2;
}

See the Pen Positioning items (rows) by Zell Liew (@zellwk) on CodePen.

Позиционирование элементов в именованных зонах

Если вы не хотите считать ряды и колонки, вы можете им имена. Таким образом каждая ячейка сетки будет иметь свое имя — станет именованной зоной (grid area). Чтобы сделать это, используйте свойство grid-template-areas на контейнере.

Помните:

1. Нужно дать имя каждой ячейке.
2. Чтобы оставить ячейку без имени, используйте символ . (точка).
3. Каждый ряд выделяется кавычками («row1» «row2»). Между рядами нет запятых, только пробел.
4. Колонки внутри ряда отделяются пробелом («area1 area2»).

Давайте, например, создадим стандартный макет с тремя зонами:

• header — занимает весь первый ряд и всю ширину макета (4 колонки);
• main — второй ряд, по ширине занимает только половину макета (2 колонки), поэтому по бокам остаются пустые зоны;
• footer — занимает весь третий ряд и всю ширину макета.

.grid {
  grid-template-areas: "header header header header"
                      ".      main   main   .     "
                      "footer footer footer footer";
}

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

.grid {
  display: grid;
  /* ... */
}

main {
  grid-area: main
}

See the Pen Grid-template-area by Zell Liew (@zellwk) on CodePen.

Как запомнить эти свойства

Итак, у нас уже целых 6 свойств для запоминания:

• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-column
• grid-row
• grid-area

Советы для запоминания:

1. Слово template используется только для самой сетки (элемент-контейнер).
   1. Оно позволяет объявлять сетку и именовать отдельные зоны.
   2. Свойства со словом template указываются во множественном числе.
2. Свойства без слова template:
   1. Указываются в единственном числе.
   2. Позволяют позиционировать элементы сетки (дочерние).

Промежутки

Между колонками и рядами в сетке могут быть промежутки — гэпы (gaps).

Чтобы создавать их, у нас есть три достаточно очевидных свойства:

• grid-column-gap — расстояние между колонками,
• grid-row-gap — расстояние между рядами,
• grid-gap — короткий вариант свойства.

При использовании короткого свойства grid-gap сначала указывается значение для рядов, потом для колонок: row-gap column-gap. Можно также указать всего одно значение, которое будет применяться и для рядов, и для колонок.

/* Разные значения */
.grid {
  grid-column-gap: 1em;
  grid-row-gap: 2em;
}

.grid {
  grid-gap: 2em 1em;
}

/* Одинаковые значения */
.grid {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

.grid {
  grid-gap: 1em;
}

See the Pen Explicit Grid with gap by Zell Liew (@zellwk) on CodePen.

Выравнивание элементов

На этом этапе многие начинают тормозить, поэтому сконцентрируйтесь 🙂

Всего у нас есть шесть свойств для выравнивания элементов:

• justify-content
• align-content
• justify-items
• align-items
• justify-self
• align-self

Очевидно, что мы можем разделить их на группы:

• Группа justify и группа align;
• А также группы content, items и self.

Разобравшись отдельно в этих группах, вы легко сообразите, что они означают в комбинациях.

justify vs align

Сетка имеет две оси:

• Inline-ось (строчная) — размещение элементов в одной строке;
• Block-ось (блочная) — размещение строк в одном блоке.

Чтобы выровнять элементы по inline-оси, вам нужны свойства со словом justify, а для block-оси понадобятся align-свойства.

Маленькое руководство по определению осей:

1. Определите направление используемого языка. Например, для русского языка используется направление «слева направо».
2. Inline-ось — это движение вашего взгляда при чтении строки текста (слева направо).
3. Block-ось — это движение вашего взгляда при переходе на следующую строку текста (сверху вниз).

Для русского, английского и многих других языков:

1. Inline-ось идет слева направо.
2. Block-ось идет сверху вниз.

Но в мире есть и языки с другими направлениями. Если вы измените значение CSS-свойства writing-mode, то направление осей может поменяться.

content vs items vs self

Свойства со словом content (justify-content и align-content) позволяют выравнивать саму сетку целиком. Они нужны только в том случае, если размеры вашей сетки меньше, чем размеры окружающего ее пространства и вы хотите ее растянуть (что бывает довольно редко).

.grid {
  justify-content: /* some value */;
  align-content: /* some value */;
}

Вы можете использовать 7 значений (для каждой оси):

• start — сетка сдвигается к началу оси.
• end — сетка сдвигается к концу оси.
• center — сетка сдвигается к центру оси.
• stretch — сетка заполняет всю ось (по умолчанию).
• space-between — между элементами сетки (колонками или рядами) устанавливаются равные промежутки, которые занимают все свободное пространство. При этом по краям сетки промежутков нет, они прижаты к краям контейнера.
• space-around — равные промежутки устанавливаются вокруг каждого элемента сетки, включая крайние.
• space-evently — промежутки распределяются равномерно, крайние равны внутренним.

Больше информации об этих значениях.

Переходим к items-свойствам (justify-items и align-items). Они предназначены для выравнивания элементов сетки внутри ячеек и используются чаще всего.

.grid {
  justify-items: /* some value */;
  align-items: /* some value */;
}

Можно использовать 4 значения:

• start — элемент сдвигается к началу оси.
• end — элемент сдвигается к концу оси.
• center — элемент выравнивается по центру оси.
• stretch — элемент растягивается и заполняет всю ось (по умолчанию).

И наконец, у нас остались только self-свойства (justify-self и align-self). Они делают ровно то же самое, что и items-свойства, о которых мы говорили только что, но применяются не к сетке, а к отдельному элементу.

.grid-item {
  justify-self: /* some value */;
  align-self: /* some value */;
}

Неявная сетка

Предположим, вы хотите создать сетку, но указываете недостаточно рядов.

Вот сетка, в которой три колонки и всего один ряд.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-row: 3em;
}

А в реальной верстке у нас целых 6 элементов:

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Если в вашей явной сетке не хватает места для размещения элементов, CSS Grid создаст дополнительные места автоматически (неявно). По умолчанию будут добавлены дополнительные ряды.

Если вы хотите изменить направление сетки (чтобы добавлялись колонки, а не ряды), установите grid-auto-flow: row.

Все это автоматическое распределение элементов называется неявной сеткой.

Чтобы настроить автоматически создающиеся колонки и ряды, используйте следующие свойства:

• grid-auto-columns
• grid-auto-rows

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 3em;
  grid-auto-rows: 6em;
}

See the Pen Implicit grid by Zell Liew (@zellwk) on CodePen.

Как запомнить свойства неявной сетки

Ориентируйтесь на слово auto.

• template — это явная сетка
• auto — это неявная сетка

Краткий справочник

Перечисленных свойств CSS Grid вам хватит в 80% случаев. В необычных ситуациях, конечно, придется гуглить.

Создание сетки

• Явное
  • grid-template-columns
  • grid-template-rows
  • grid-template-areas
• Неявное
  • grid-auto-columns
  • grid-auto-rows

Промежутки

• grid-column-gap
• grid-row-gap
• grid-gap

Позиционирование элементов внутри сетки

• grid-column
• grid-row

Выравнивание

• justify-content
• align-content
• justify-items
• align-items
• justify-self
• align-self