Можно представить собственные названия у сеток CSS как собственный синтаксис. Без них можно обойтись, выразив расположение сеток другими способами, но они могут помочь сделать расположение более интуитивно понятным.

Допустим, вам нужно создать сетку из трех столбцов:

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

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

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

.item {
  grid-column: 1 / 2; /* начать на первом столбце и закончить на втором */
}

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

.item {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

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

.item {
  grid-area: 1 / 1 / 2 / 2;
}

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

Посмотрите на следующую запись. При определении столбцов можно задать им названия с помощью отдельного свойства:

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns:
     200px  1fr  1fr;
  grid-template-areas:
    "pro a b"
    "pro c d";
}

Каждая группа у свойства «grid-template-areas» (шаблон областей сетки) — это строка. Внутри находятся придуманные нами названия. Они могут быть любыми, лишь бы Вам было понятно. Обратите внимание, как слово «pro» повторяется дважды в двух строках. Это важно, так как означает, что можно разместить элемент сетки там, где есть значение «pro», и он будет находиться в первом из трех столбцов и в двух строках. Довольно понятно, не так ли?

Разместим его следующим образом:

.pro-features {
  /* вместо этого */
  grid-area: 1 / 1 / 2 / 3;
  /* можно сделать так */
  grid-area: pro;
}

Вот как выглядит этот простой пример:

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Создание скругленной изнутри рамки
• Использование однострочных и многострочных таблиц стилей CSS
• Использование возможностей декорирования выделения элементов