Grid Layout (гриды)

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

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

Описание грид сетки

Грид-модель работает по системе сеток. Элементы грида (grid items) располагаются вдоль главной оси (main axis) и поперечной оси (cross axis), которые создают размерность и позиционируют систему координат для контента в самом grid-контейнере.

Грид-контейнер - родительский элемент, к которому применяется свойство display: grid
Грид-элемент - дочерний элемент, прямой потомок грид-контейнера. Подчиняется правилам раскладки гридов. Чтобы элемент появился в сетке, в нем (внутри) элемента должно быть хоть что-то (текст, другие HTML теги). Пустой элемент - это всего лишь ячейка для расположения в нем чего-либо.

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

Линия сетки - разделительная линия, формирующая структуру грида.
Это образные линии (на самом деле никаких линий нет), разделяющие сетку на колонки и ряды, они создают структуру сетки. Линии автоматически нумеруются, но их можно нумеровать самостоятельно. Также линиям можно указывать имена, чтобы потом прикреплять к ним элементы по номеру или по имени линии. По сути линия — это номер или имя колонки/строки.

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

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

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

Все свойства

Ниже описаны все свойства гридов, мы разберем самые необходимые, с остальными вы можете ознакомиться сами

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

Чтобы создать Grid разметку, задайте нужному элементу display: grid.
Этот шаг автоматически сделает всех прямых потомков выбранного элемента — грид-элементами. Снаружи грид-контейнер ведёт себя как блок.

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

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

Размеры содержимого сетки

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

Абсолютная величина
px (пиксели) - указываем нужный размер или пользуемся функцией minmax (), которая задаёт минимальный и максимальный размер дорожки.

Относительные величины
Можно задавать размер относительно текущего шрифта (em)

Если ширина или высота у нас зависят от размеров окна браузера, то можно использовать относительную величину
vh (высота окна), vw (ширина окна):
100vh — вся высота окна,
33vh — треть высоты,
50vw — половина ширины окна браузера.

Для простоты можно представить, что числа перед vh и vw — это проценты. 100 — это сто процентов, вся видимая часть, 50 — это половина и так далее. Можно указать больше 100, тогда содержимое уедет за границы окна и нужно будет использовать прокрутку вниз или вбок.

FR (фракция - свободное место в сетке) - специальная единица измерения в гридах. Свободное место в контейнере делится на фракции, так если одной колонке указать 1fr, а другой 2fr, то вторая будет больше первой в 2 раза и обе они заполнят все свободное пространство. Аналог flex-grow: у флексов. Тут можно также указывать дробные значения: 0.5fr, 2.3fr.
Подробнее про фракцию можно почитать тут.

Создаем сетку нужного размера

Начнём с пустого шаблона. Чтобы было наглядно видно, как в сетке располагаются ячейки, сделаем так:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Пишем гриды</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- создаём контейнер, который будет отвечать за нашу сетку -->
    <div class="container">
      <!-- и создаём 5 вложенных элементов -->
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
     </div>
  </body>
</html>

/*общие настройки сетки*/
.container {
  display: grid; /* подключаем сетку */
  border: 5px solid #138900; /*рисуем зелёные рамки*/
}
/*внешний вид ячеек*/
 .container > * {
   background-color: #cfe8dc;  /*фоновый цвет*/
   border-radius: 5px; /*скругление углов*/
   padding: 7px; /*отступ от содержимого до края ячейки*/
   margin: 1px;  /*расстояние от одной границы ячейки до другой*/
 }

Вот что получается, если у сетки не задавать никаких параметров:

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

Формируем строки и колонки

Давайте посмотрим, как добавление строк и колонок в сетку влияет на положение и размер ячеек.

Чтобы задать количество строк и их размеры используйте свойство grid-template-rows: размер размер;
Чтобы задать количество колонок и их размеры используйте свойство grid-template-columns: размер размер;
В значении через пробелы указываются размеры: высота ряда (rows) или ширина колонки (columns). Сколько раз будет указан размер, столько будет рядов/колонок.

Внутри себя они могут принимать множество различных значений. Некоторые из них:
1. Любые выше описанные css-единицы.
2. min-content - ширина колонки будет равна минимально возможной.
3. max-content - ширина колонок будет равнв максимально возможной.
4. minmax(min, max) - функция, принимающая два значения: минимальный и максимальный размер, т.е. вы устанавливаете границы, в пределах которых браузер сам выбирает ширину.
5. auto - браузер автоматически подстраивает колонки по ширине.
6. <line-name> - переменная на ваш выбор, подробнее будет описано дальше;

Сделаем в сетке три колонки по 150 пикселей:

/*общие настройки сетки*/
.container {
  display: grid; 
  border: 5px solid #138900; 
  grid-template-columns: 150px 150px 150px; /*добавляем три колонки размерами 150 пикселей*/
}

/*внешний вид ячеек*/
 .container > * {
   background-color: #cfe8dc;  
   border-radius: 5px; 
   padding: 7px; 
   margin: 1px;  
 }

Сетка сразу уменьшилась по высоте, подстраиваясь под количество элементов. Теперь укажем высоту в 80px для элементов:

/*общие настройки сетки*/
.container {
  display: grid; 
  border: 5px solid #138900; 
  grid-template-columns: 150px 150px 150px; 
  grid-template-rows: 80px; /* Будет создан 1 ряд высотой 80px */
}

/*внешний вид ячеек*/
 .container > * {
   background-color: #cfe8dc;  
   border-radius: 5px; 
   padding: 7px; 
   margin: 1px;  
 }

Так как мы задали только один параметр в 80px, высота поменялась только у первой строки.
Сделаем 3 строки одинаковой высоты:

/*общие настройки сетки*/
.container {
  display: grid; 
  border: 5px solid #138900; 
  grid-template-columns: 150px 150px 150px; 
  grid-template-rows: 80px 80px 80px ; /* Будет создано 3 ряда высотой 80px*/
}

/*внешний вид ячеек*/
 .container > * {
   background-color: #cfe8dc;  
   border-radius: 5px; 
   padding: 7px; 
   margin: 1px;  
 }

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

Чтобы не писать подряд несколько значений используйте команду:
grid-template-rows: repeat(3, 80px);

Это функция, которая принимает 2 значения:
1. Сколько раз повторить размер
2. Какое значение нужно повторить.

В нашем случае она повторяет нужный размер (80 пикселей) определённое количество раз — в нашем случае это 3 раза.

То же самое работает и с колонками — сделаем 4 одинаковые колонки используя функцию repeat ():
grid-template-columns: repeat(4, 150px);

Теперь сделаем так: добавим еще элементов, вторую строку растянем вниз до конца окна — используем для этого 1fr, а столбцы сделаем одинаковой ширины.

/*общие настройки сетки*/
.container {
  display: grid; 
  border: 5px solid #138900; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: 80px 1fr 80px ;
}

/*внешний вид ячеек*/
 .container > * {
   background-color: #cfe8dc;  
   border-radius: 5px; 
   padding: 7px; 
   margin: 1px;  
 }

Кажется, что 1fr, который должен был растянуть вторую строку на всё свободное место, не работает. Но с ним всё в порядке, смотрите, что произошло:

Первая строка получила ширину 80 пикселей.
Третья строка тоже получила 80 пикселей.
После этого браузер, глядя на 1fr, стал высчитывать, какую высоту сделать у второй строки.
Браузер знает, что 1fr должен заполнить всё оставшееся свободное место в сетке, но у нас нижняя граница сетки прилегает вплотную к последней строке.
Это значит, что свободного места в сетке нет, поэтому браузер учёл все внутренние отступы из общих настроек ячейки и сделал вторую строку минимальной высоты.

Чтобы это исправить, нужно явно задать общую высоту сетки:

/*общие настройки сетки*/
.container {
  display: grid; 
  border: 5px solid #138900; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: 80px 1fr 80px;
  height: 350px; /*Задали высоту контейнера*/
}

/*внешний вид ячеек*/
 .container > * {
   background-color: #cfe8dc;  
   border-radius: 5px; 
   padding: 7px; 
   margin: 1px;  
 }

Чтобы сетка растянулась по высоте на всё окно, используют относительные единицы, например, vh — она указывает, сколько процентов от высоты окна будет занимать элемент. Чтобы растянуть сетку до края, напишем:

/*общие настройки сетки*/
.container {
  display: grid; 
  border: 5px solid #138900; 
  grid-template-columns: repeat(4, 1fr); 
  grid-template-rows: 80px 1fr 80px;
  height: 100vh; /*Задали высоту контейнера*/
}

/*внешний вид ячеек*/
 .container > * {
   background-color: #cfe8dc;  
   border-radius: 5px; 
   padding: 7px; 
   margin: 1px;  
 }

Расположение элементов в сетке

Ранее упоминалось о том, что линия сетки автоматически пронумерована.
У каждой линии сетки есть 2 значения: номер при счете слева направо и номер при счете справа налево, в этом случае они имеют отрицательное значение.

Номера можно использовать для привязки элементов к конкретным линиям сетки.
Для их расположения в сетке существует 4 свойства:
grid-column-start - начальная вертикальная линия элемента в сетке
grid-column-end - конечная вертикальная линия элемента в сетке. Значение указывает до какой колонки располагать элемент, т.е. сама колонка не включается. Если нужно включить и указанную колонку, то прибавьте единицу. Например, для 12 колоночного макета указывается значение 13.
grid-row-start - начальная горизонтальная линия
grid-row-end - конечная горизонтальная линия. Также указыкает до какой строки распологать элемет.

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

Создадим простой трехколоночный макет сайта. Скопируйте ниже код себе и попробуйте различные значения линий.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Пишем гриды</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- создаём контейнер, который будет отвечать за нашу сетку -->
    <div class="container">
      <header class="bg-header grid-header"> Шапка сайта</header>
      <aside class=" bg-aside grid-aside">Сайдбар</aside>
      <main class=" bg-main grid-main">Основной контент</main>
     </div>
  </body>
</html>

/* основная настройка*/
body {
  padding: 5;
  margin: 0px; /*убираем верхнее и нижнее поле, равное 1em*/
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
}

/* делаем оформление*/
.bg-header {
  padding: 15px;
  background: #E7ECEF;
}

.bg-aside {
  padding: 15px;
  background: #6096BA;
}

.bg-main {
  padding: 15px;
  background: #A3CEF1;
}

/* задаем гриды и количество колонок и строк*/
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  height: 99vh;
}

/*задаем гибкую настройку хедеру*/
.grid-header {
  grid-column-start: 1;
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 3;
}

/*задаем гибкую настройку сайдбару*/
.grid-aside {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 13;
}

/*задаем гибкую настройку основному контенту*/
.grid-main {
  grid-column-start: 4;
  grid-column-end: 13;
  grid-row-start: 3;
  grid-row-end: 13;
}

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

/*задаем гибкую настройку хедеру*/
.grid-header {
  grid-column-start: 4; /* Поменяли значение с 1 на 4*/
  grid-column-end: 13;
  grid-row-start: 1;
  grid-row-end: 3;
}

Для этих свойств есть сокращенные версии записи.
grid-column - сокращенная запись горизонтальной линии для задания начала и конца значения
grid-row - сокращенная запись вертикальной линии для задания начала и конца значения

Синтаксис:

/* Полная версия записи для строк(рядов) */
grid-row-start: 2; /* Элемент начинается со 2 линии рядов */
grid-row-end: 4; /* Элемент заканчивается на 4 линии рядов */

/*Сокращенная версия*/
grid-row: 2 / 4; /* скачала указывается начальное значение, затем через знак деления конечное*/

/* Полная версия записи для колонок(столбцов)*/
grid-column-start: 1;
grid-column-end: 3;

/*Сокращенная версия*/
grid-column: 1 / 3; /* скачала указывается начальное значение, затем через знак деления конечное*/

Используя сокращенные записи пример выше можно написать так:

/*Можно написать с помощью сокращенных свойств*/
.grid-header {
  grid-column: 1/13;
  grid-row: 1/3;
}

.grid-aside {
  grid-column: 1/4;
  grid-row: 3/13;
  
}

.grid-main {
  grid-column: 4/13;
  grid-row: 3/13;
}

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

Для наглядности, возьмем наш макет и шапку сайта растянем теперь при помощи отрицательного конечного значения.
Мы также без вреда макету можем заменить значения у строк(рядов) сайдбара, с 13 на -1 и строки с колонками основного контента, 13 поменяем на -1.

/*Сокращенная запись*/
.grid-header {
  grid-column: 1/-1; /*Поменяли 13 на -1. Отсчет с конца*/
  grid-row: 1/3;
}

.grid-aside {
  grid-column: 1/4;
  grid-row: 3/-1; /*Поменяли 13 на -1. Отсчет с конца*/
  
}

.grid-main {
  grid-column: 4/-1; /*Поменяли 13 на -1. Отсчет с конца*/
  grid-row: 3/-1; /*Поменяли 13 на -1. Отсчет с конца*/
}



/*Второй вариант полной записи*/
.grid-header {
  grid-column-start: 1;
  grid-column-end: -1; /*Поменяли 13 на -1. Отсчет с конца*/
  grid-row-start: 1;
  grid-row-end: 3;
}

.grid-aside {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: -1; /*Поменяли 13 на -1. Отсчет с конца*/
}

.grid-main {
  grid-column-start: 4;
  grid-column-end: -1; /*Поменяли 13 на -1. Отсчет с конца*/
  grid-row-start: 3;
  grid-row-end: -1; /*Поменяли 13 на -1. Отсчет с конца*/
}

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

Синтаксис:

grid-column: 1/ span 4; /* Указывает, что элемент занимает 4 колонки по горизонтали */
grid-row: 1/ span 2; /* Указывает, что элемент занимает 2 строки по вертикали*/

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Пишем гриды</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- создаём контейнер, который будет отвечать за нашу сетку -->
    <div class="container">
      <nav class="bg-nav grid-nav">Меню</nav>
      <header class="bg-header grid-header"> Шапка сайта</header>
      <aside class=" bg-aside grid-aside">Сайдбар</aside>
      <main class=" bg-main grid-main">Основной контент</main>
     </div>
  </body>
</html>

body {
  padding: 5;
  margin: 0px; /*убираем верхнее и нижнее поле, равное 1em*/
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
}

.bg-header {
  padding: 15px;
  background: #E7ECEF;
}

.bg-nav {
  padding: 15px;
  background: #8b8c89;
}

.bg-aside {
  padding: 15px;
  background: #6096BA;
}

.bg-main {
  padding: 15px;
  background: #A3CEF1;
}

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  height: 99vh;
}

.grid-header {
  grid-column: 1/-1;
  grid-row: 1/ span 2; /*Указали, что элемент занимает 2 ячейки по вертикали вместо grid-row: 1/3; */
}

.grid-nav {
  grid-column: 1/ span 2;  /*Указали, что элемент занимает 2 ячейки по горизонтали вместо grid-column: 1/ 3;*/
  grid-row: 3/-1;
}

.grid-aside {
  grid-column: span 2; /* Использование только ключевого слова. Браузер разместить элемент с тем количеством строк и колонок, которое указано. В нашем случае 2 колонки.*/
  grid-row: 3/-1;
  
}

.grid-main {
  grid-column: 3/ span 8; /* Указали, что элемент занимает 8 ячеек по горизонтали */
  grid-row: 3/-1;
}

Именование линий грида

Чтобы быстро описать простую сетку с помощью гридов, нужно хорошенько поорудовать свойствами grid-row-start/grid-row-end и grid-column-start/grid-column-end. Что мы описали выше. Но получается несколько многословно.

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

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

grid-template-columns: [название линии] размер [название линии] размер;
grid-template-rows: [название линии] размер [название линии] размер;

Например:
grid-template-columns: [header-top] 1fr repeat(3, 1 fr);
/* [header-top] 1fr - создаст именованую линию header-top и полосу шириной в 1 фракцию, затем
repeat(3, 1 fr) создаст 3 полосы шириной в 1 фракцию */

Или для удобства можно начать с новой линии:
grid-template-columns:
   [header-start] 1fr /* Обратите внимание, что знак ; не ставится до тех пор пока не закончите перечисление*/
   [header-end] 10px
   [nav-start] 1fr 
   [nav-end] 10px
   [main-start] 1fr 
   [main-end] -1;

grid-template-rows: 
   [aside-start] 1fr 
   [aside-end] 10px 
   [content-start] 1fr;

Можно подставлять любое количество названий и в уже сверстанный макет. Запись не повредит шаблону.

Затем, используя эти названия, мы можем позиционировать элементы между определенными линиями:

.special-item {
  grid-column: header-start / nav-end;
  grid-row: aside-start;
  background-color: #bbb;
}

Давайте в нашем макете зададим имя только начальным линиям.

.container {
  display: grid;
  grid-template-columns:
    [nav-start] repeat(2, 1fr) /*Левая линия от которой начинает отрисовываться меню */
    [main-start] repeat(8, 1fr) /* Линия от которой начинается основной контент. Также ограничивает ширину nav (меню) */
    [aside-start] repeat(2, 1fr); /* Линия от которой начинается сайдбар */
  grid-template-rows: 
    [header-start] 1fr 1fr /* Самая верхняя линия от которой отрисуется шапка сайта */
    [content-start] repeat(9, 1fr); /* Линия, откуда начинается основной контент сайта - nav, main, aside. Нужна для ограничения высоты шапки */
  height: 99vh;
}

.grid-header {
  grid-column: 1/-1;
  grid-row-start: header-start; /* Начинается шапка сайта с header-start */
  grid-row-end: content-start; /* Шапка заканчивается на контенте, тем самым мы ограничили размеры хедера в 2 фракции */
}

.grid-nav {
  grid-column-start: nav-start; /* Начало меню */
  grid-column-end: main-start; /* Ограничили меню основным контентом */
  grid-row: 3/-1;
}

.grid-aside {
  grid-column-start: aside-start; /* Начало сайдбара */
  grid-column-end: -1;
  grid-row: 3/-1;
}

.grid-main {
  grid-column-start: main-start; /* Начало основного контента */
  grid-column-end: 11;
  grid-row: 3/-1;
}

Важно!
Создание именовыных линий не отнимает у них индекса. К линиям все еще можно обращаться по индексу (как по положительному, так и отрицательному)

Именование областей грида

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

В качестве значения grid-template-areas принимает данные, которые заключаются в двойные кавычки, внутри которых описываются области, расположенные на сетке. Сколько колонок они займут, столько раз нужно повторить внутри значения через пробел.

Синтаксис визуально показывает как выглядит сетка:

grid-template-areas: 
   "имя  имя2  имя3"
   "имя  имя2 имя3"
   "имя  none   .";

// или можно так
grid-template-areas: "имя  имя2 имя3"  "имя  имя2 имя3"  "имя none .";

"имя имя2 имя3" - в значении внутри кавычек нужно через пробелы указывать имена. Каждые кавычки с именами будут представлять собой ряд сетки, а имена внутри кавычек задают колонки.

"имя имя имя2" - если указать одно и тоже имя несколько раз подряд, то имя объединит ячейки и мы получим область (большую ячейку). Объединять ячейки таким способом можно не только внутри ряда, но и между рядами.

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

none — область не определена

Важно!
Область должна быть прямоугольной формы.
Каждый ряд должен иметь одинаковое количество ячеек.

А дальше для каждого элемента прописывается своё название в grid-area. Одному элементу в HTML может соответствовать только одна грид-область.

grid-template-areas: 
   "имя  имя2  имя3"
   "имя  имя2 имя3"
   "имя  none   .";

/* Указываем элементу область */
.grid-element-1 {
  grid-area: имя;
}

.grid-element-2 {
  grid-area: имя2;
}

.grid-element-3 {
  grid-area: имя3;
}

Давайте рассмотрим макет грида 6 колонок на 4 строки:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>grid-template-areas</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <header class="bg-header grid-header">grid-area: header;</header>
      <nav class="bg-nav grid-nav">grid-area: nav;</nav>
      <aside class=" bg-aside grid-aside">grid-area: aside;</aside>
      <main class=" bg-main grid-main">grid-area: main;</main>
      <footer class="bg-footer grid-footer">grid-area: footer;</footer>
     </div>
  </body>
</html>

/* Общие настройки */
body {
  padding: 5;
  margin: 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}

/* Фон блоков */
.bg-header {
  padding: 5px;
  background: #E7ECEF;
}

.bg-nav {
  padding: 5px;
  background: #8b8c89;
}

.bg-aside {
  padding: 5px;
  background: #6096BA;
}

.bg-main {
  padding: 5px;
  background: #A3CEF1;
}

.bg-footer {
  padding: 5px;
  background: #E7ECEF;
}

/* В контейнере задаем визуальный макет */ 
.container {
  display: grid;
  grid-template-columns: repeat(6, 100px); /* говорим, что будет 6 колонок размером 100 пикселей */
  grid-template-rows: repeat(4, 100px); /* говорим, что будет 4 строки размером 100 пикселей */
  grid-template-areas: /* Задаем именование областей */
    "header header header header aside aside" /* хедер будет занимать 4 колонки, а сайдбар - 2 */
    "nav main main main aside aside" /* nav займет 1 колонку, main - 3, сайдбар - 2 */
    "nav main main main aside aside" /* nav займет 1 колонку, main - 3, сайдбар - 2 */
    "footer footer footer footer footer footer"; /* footer займет 6 колонок */
}

/* Зададим элементу нужную область */
.grid-header {
  grid-area: header;
}

.grid-nav {
  grid-area: nav;
}

.grid-main {
  grid-area: main;
}

.grid-aside {
  grid-area: aside;
}

.grid-footer {
  grid-area: footer;
}

grid-template-areas и пустые ячейки грида

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

Для этого вместо буквенного именования области используется символ точки "."

Давайте сделаем макет 3х3 и зададим ему три цвета.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>grid-template-areas пропуск ячейки</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="dark-blue grid-dark"></div>
      <div class="blue grid-blue"></div>
      <div class="light-blue grid-light"></div>
     </div>
  </body>
</html>

body {
  padding: 5;
  margin: 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}

.dark-blue {
  padding: 5px;
  background: #023e8a;
}

.blue {
  padding: 5px;
  background: #0077b6;
}

.light-blue {
  padding: 5px;
  background: #6096BA;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas:
    "dark-blue blue light-blue"
    "dark-blue blue light-blue"
    "dark-blue blue light-blue";
}

.grid-dark {
  grid-area: dark-blue;
}

.grid-blue {
  grid-area: blue;
}

.grid-light {
  grid-area: light-blue;
}

Если мы хотим, чтобы во втором ряду осталась только центральная ячейка, то заменим blue в первом и последнем ряду на точки:

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas:
    "dark-blue . light-blue"
    "dark-blue blue light-blue"
    "dark-blue . light-blue";
}

Полезные ссылки

Интерактивная игра на отработку гридов - Читать
Шпаргалка по гридам - Читать
Еще одна шпаргалка по гридам (английский) - Читать

Практика

1. Первый макет грида
Сделай 24 колоночную сетку.
Попробуй различные значения grid-template-columns и grid-template-rows.

2. Второй макет
Сделай макет, состоящий из:
- шапки
- левого сайдбара
- правого сайдбара
- основного контента
- футера

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

3. Третий макет
Повтори макет по образцу.

Создай сетку грида с помощью grid-template-columns и grid-template-rows.
Задай элементам координаты с помощью grid-column и grid-row.
Либо пойти другим путем и воспользуйся именованными областями.

Выбор за тобой!

Материалы:
Текст: #10002b
Блок nav: #c77dff
Блок header: #e0aaff
Блок aside: #9d4edd
Блок main: #7b2cbf
Блок footer: #5a189a

Образец:

Предыдущее занятие | Следующее занятие

Flexbox | Grids продолжение