Свойство grid-template-areas позволяет некоторые ячейки помечать как пустые.

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

К примеру, возьмём код из прошлой теории, где был грид из трёх столбцов.

grid-template-areas:
  "red yellow green"
  "red yellow green"
  "red yellow green";

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

grid-template-areas:
  ".   .      green"
  "red yellow green"
  "red yellow green";

Получается нужный нам результат:

Давайте дополним пустыми ячейками пример из прошлого задания.