Grid template areas: grid-template-areas — CSS: Cascading Style Sheets

CSS grid-template-areas

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯

Пример

Сделать именованный элемент «мяреа» span два столбца в сетке пять столбцов макета:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: «myArea myArea . . .»;
}

Определение и использование

Свойство grid-template-areas определяет области в макете сетки.

Можно присвоить имена элементам сетки с помощью свойства Сетка-область, а затем ссылаться на имя в grid-template-areas свойстве.

Каждая область определяется апострофами. Используйте знак периода для ссылки на элемент сетки без имени.

Значение по умолчанию:	none
Inherited:	no
Animatable:	yes. Читайте о animatable
Version:	Модуль макета сетки CSS уровень 1
Синтаксис JavaScript:	object. style.gridTemplateAreas=». . . myArea myArea»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Синтаксис CSS

grid-template-areas: none|itemnames;

Значения свойств

Другие примеры

Пример

Укажите две строки, где «Item1» охватывает первые два столбца в первых двух строках (в макете сетки из пяти столбцов):

. item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas:
    ‘myArea myArea . . .’
    ‘myArea myArea . . .’;
}

Пример

Назовите все элементы и сделайте готовый к использованию шаблон веб-страницы:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    ‘header header header header header’
    ‘menu main main main right right’
    ‘menu footer footer footer footer’;
}

Похожие страницы

CSS Справочник: CSS Grid Item

CSS Справка: The grid-area property

CSS Справка: The grid-template property

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Золотая рыбка CSS3 Grid Layout (часть 2) — CSS-LIVE

В прошлой статье золотая рыбка Grid Layout выполнила для нас множество прекрасных желаний, но тем не менее, это далеко не всё, на что она способна. При помощи волшебства Grid Layout можно творить такие вещи, для которых раньше нам бы понадобилось куча «костылей» и хаков, либо исключительно JavaScript.

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

Важно! Новый синтаксис описания именованных линий!

Не успели мы опубликовать первую часть статьи, как W3C решили улучшить синтаксис описания именованных линий. Теперь имена линий надо будет указывать не в круглых скобках, а в квадратных. В W3C решили, что это легче читается и лучше совместимо с SASS. Всегда следите за новинками спецификаций по редакторским черновикам!

Неявные именованные линии

У нас есть возможность не только привязывать ячейки к конкретным линиям (как мы видели в прошлой статье), но и привязать эти ячейки к нужным линиям «намертво»!

Всё сразу станет ясно, когда мы рассмотрим простой пример:

HTML-код:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Ну и конечно же CSS:

. grid {
  display: grid;
  width: 500px;
  height: 150px;
  
  grid-template-columns: 2fr 1fr;

  grid-template-rows: [header-top] auto [header-bottom  main-top] 1fr [main-bottom];

  grid-template-areas: "banner    banner"
                       "container menu";
  }
.grid > :nth-child(1) {
    background-color: #FCC;
  
    grid-column-start: banner-start;
    grid-column-end: banner-end;
  
    grid-row-start: header-top;
    grid-row-end: header-bottom;
}

.grid > :nth-child(2) {
    background-color: #CFC;
  
    grid-row-start: header-bottom;
    grid-row-end: main-bottom;
}

.grid > :nth-child(3) {
    background-color: #CCF;
  
    grid-row-start: header-bottom;
    grid-row-end: main-bottom;
}

И результат:

Результат выглядит довольно просто, HTML-код тоже, но вот на CSS нужно остановиться подробнее, поскольку именно в нём кроется весь фокус неявных именованных линий, а также содержатся незнакомые нам свойства (grid-column-start/grid-row-start и grid-column-end/grid-row-end).

Из прошлой статьи мы помним, что grid-template-columns: 2fr 1fr; означает, что у нас будет две колонки, первая из которых занимает две фракции (2fr), а вторая — одну (1fr).

У трех ячеек нашего грида будут собственные имена: «banner», «container» и «menu». Возможность задавать имена конкретным ячейкам — еще один магический секрет гридов, который мы подробно рассмотрим чуть ниже. А пока примем имена ячеек как данность и посмотрим, как легко и изящно можно привязывать к ним блоки.

Для привязки блоков к конкретным линиям нужно несколько вещей: явные/неявные названия линий и пару волшебных свойств. Явные названия линий уже знакомы нам по предыдущей статье, где мы именовали линии в скобках «[first] 100px [main]…» свойства grid-template-columns. Кстати, в нашем примере мы проделываем аналогичную штуку. А вот с неявными линиями мы сталкиваемся впервые, поэтому берите ручку и записывайте, как ими пользоваться:

В нашем примере 3 именованных ячейки, у каждой ячейки — 4 границы. Эти границы и образуют неявные именованные линии. Имена таких линий получаются из имен ячеек добавлением -start/-end. Поэтому далее берём свойство grid-column-start/grid-column-end и привязываем grid-элемент (в нашем случае — первый) к двум неявным линиям: banner(-start) и banner(-end

.grid > :nth-child(1) {
    grid-column-start: banner-start;
    grid-column-end: banner-end;
}

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

Поскольку «banner» занимает две колонки, то левая граница ячейки у нас совпадает с левым краем, а правая — с концом второй колонки грида. И теперь нам осталось только взять свойства grid-column-start/grid-column-end и привязать grid-элемент (в данном случае — первый) к этим колонкам. Я думаю теперь вы уже сами догадались, почему наш элемент стал занимать две колонки? На всякий случай я сделал живой пример.

Реальная польза от привязки элементов

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

Мы не будем трогать вышеприведённую HTML- и CSS-разметку, а обратим внимание на некоторые строки кода в CSS, которые я специально оставил, убрав на время ненужные:

.grid {
  
 grid-template-rows: [header-top] auto [header-bottom  main-top] 1fr [main-bottom];
}

.grid > :nth-child(2) {
    
    grid-row-start: main-top;
    grid-row-end: main-bottom;
}

.grid > :nth-child(3) {
     
    grid-row-start: main-top;
    grid-row-end: main-bottom;
}

Зная, как работают свойства grid-column-start/grid-column-end совсем не трудно догадаться и о назначении свойств grid-row-start/grid-row-end. Если первые отвечают за привязку элемента по горизонтальной оси, то вторые — по вертикальной.

Из картинки ясно, что верхняя граница второго и третьего элементов привязана к линии «main-top», которая находится на границе нижнего края первого элемента (шапки) и верхнего края второго и третьего элементов (за это отвечает grid-row-start: main-top). А нижняя граница второго и третьего элементов привязана к линии «main-bottom», которая находится в самом низу (сделано это с grid-row-end: main-bottom). Кстати, ещё один важный момент: нижний край первого элемента (шапки) находится на одной отметке с верхним краем второго и третьего элементов. Это происходит из-за того, что названия линий «main-top» и «header-bottom» прописаны в одних скобках ([header-bottom main-top]).

И вот наконец-то мы подошли к самой изюминке. Казалось бы, ну привязали и привязали границы элементов к линиям, и что дальше? А дальше вот что. Теперь лёгким движением руки мы можем разделить наши линии [header-bottom main-top] и вставить между ними любое количество ячеек. И фокус в том, что при этом наши grid-элементы всё равно останутся привязанными к своим линиям! Например:

grid-template-rows: [header-top] auto [header-bottom] 50px [main-top] 1fr [main-bottom];

Мы разделили [header-bottom] и [main-top] на два блока, вставив между ними ячейку в 50px. И вот результат:

Несмотря на то, что между первым и вторым/третьим элеменами образовалась пустая ячейка 50px в высоту, наши элементы остались привязанными к своим линиям «намертво», как я и говорил. Только теперь линия [main-top] начинается после пустой ячейки, а линия [header-bottom] — перед ней.

А теперь ещё один пример, возможно, с неочевидным результатом на первый взгляд. Чуть подрихтуем наш CSS, убрав на время всё лишнее:

. grid {
  
  /* добавим ещё одну линию и с пустой ячейкой: 50px [main-top-2] */
  grid-template-rows: [header-top] auto [header-bottom] 50px [main-top] 50px [main-top-2] 1fr [main-bottom];
}

.grid > :nth-child(2) {
    
    grid-row-start: main-top;
    grid-row-end: main-bottom;
}

.grid > :nth-child(3) {
    
    /* верхний край третьего элемента теперь привязан к линии "main-top-2" */
    grid-row-start: main-top-2;
    grid-row-end: main-bottom;
}

И результат:

Здесь почти всё также, как в предыдущем примере, но теперь верхний край третьего элемента ниже верхнего края второго элемента. Так происходит, потому, что мы отвязали верхний край третьего от предыдущей линии (main-top), добавили в код ещё одну (main-top-2) и привязали третий элемент уже к ней. И поскольку между этими линиями расстояние 50px, то третий элемент опустился на это число.

Мне это напомнило абсолютное позиционирование, но только с тем преимуществом, что теперь блоки могут подстраиваться под размеры других элементов, самого грида, а также чётко сопоставлять свои границы с конкретными линиями. Здорово, не правда ли? Но нам надо двигаться дальше…

Практическая магия именованных ячеек:

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

По традиции начнём с примера. Например, нам нужно сверстать макет, состоящий из шапки, двух колонок и подвала. В данном случае разметка будет такая:

<section>
  <header>Я header</header>
  <nav>Я nav</nav>
  <main>Я main</main>
  <footer>Я footer</footer>
</section>

А CSS такой:

#grid {
  display: grid;

  grid-template-areas: "head head"
                       "nav  main"
                       "foot .   "
  }
  #grid > header { grid-area: head; }
  #grid > nav    { grid-area: nav; }
  #grid > main   { grid-area: main; }
  #grid > footer { grid-area: foot; }

#grid > * { border: 1px solid; }

Начнём со свойства grid-template-areas. Оно устанавливатся grid-контейнеру. Значение grid-template-areas принимает шаблон из любых строк, идущих в кавычках через пробел. Названия строк могут повторяться и включать в себя даже обычные точки, как видно из CSS ("foot .").

Давайте посмотрим на результат:

В нашем случае шаблон свойства grid-template-areas состоит из шести строк, по две строки в трёх парах кавычек (в сумме пять названий и одна точка). Каждая строка, это отдельная ячейка в сетке. Т.к. в первых кавычках у нас прописаны две строки с одинаковым названием, это значит, что первая ячейка будет объединена по горизонтали в две.

Но для того, чтобы grid-элементам понять, какие ячейки будет занимать каждый из них, им нужно указать специальное свойство grid-area. Поскольку мы указали элементу header grid-area: head;, то он будет занимать ячейку под названием «head».

Поскольку с header всё понятно, то с остальными элементами и подавно. Каждый из них занимает по одной ячейке, но что происходит с точкой? Она необходима для того, чтобы сетка «не развалилась», ибо точка представляет собой как бы «невидимую» колонку, которая идёт после колонки footer. Без точки колонки бы просто расположились на отдельных строчках:

И очевидно, что если бы вместо точки последнее значение grid-template-areas выглядело бы так «foot foot», то подвал, как и шапка, занял бы две ячейки по горизонтали:

А теперь давайте усложним пример. Дабавим кое-что в разметку:

<section>
  <header>Я header</header>
  <nav>Я nav</nav>
  <aside>Я aside</aside>
  <main>
    <p>Я main</p>
    <p>во мне много текста</p>
  </main>
  <footer>Я footer</footer>
  <address>Я address</address>
</section>

… и в CSS:

#grid {
  display: grid;
  
  grid-template-areas: "left topcenter right"
                       "foot1 center foot2"    
                       "foot1    .    foot2"
  }

  #grid > header { grid-area: topcenter; }
  #grid > nav    { grid-area: left; }
  #grid > aside    { grid-area: right; }
  #grid > main   { grid-area: center; }
  #grid > footer { grid-area: foot1; }
  #grid > address    { grid-area: foot2; }

  #grid > * { border: 1px solid; }

И вот сам результат:

С верхними ячейками всё ясно, grid-элементы header, nav и aside занимают верхние три, как указано в их свойстве grid-area. Но что происходит с ячейками, которые располагаются ниже? Как вы могли заметить в свойстве grid-template-areas во вторых и третьих пар кавычек есть одинаковые названия строк — foot1 и foot2. Они идут по бокам, и нижние боковые foot1 и foot2 располагаются чётко под верхними foot1 и foot2. И теперь, поскольку в свойстве grid-area для элемента footer мы указали значение foot1, а для элемента address — foot2, их строки объединились и стали занимать две ячейки по вертикали.

Средняя же колонка, состоящая из элемента main (которому выставлено grid-area: center😉 и точки (которая прописана в последних кавычках между foot1 и foot2) берут на себя роль средних двух вертикальных ячеек (и являются по сути центральной колонкой), а боковые вынуждены по высоте подстраиваться под них. Следовательно, в нашем случае боковые (объединённые) ячейки могут быть или выше центровины, или одной с ней высоты, но центровина не может быть выше боковых колонок.

Замечание: конечно, я специально в CSS расположил строки так, чтобы визуально они находились друг под другом. Я сделал это для удобочитаемости, поэтому даже если бы пары кавычек располагались не друг под другом, а в одну строку (напр. "foot1 center foot2" "foot1 . foot2"), это не поменяло бы сути. В нашем случае главное, чтобы позиции названий строк в первых кавычках совпадали с позицией названий строк во вторых кавычках.

Но это ещё не всё. Я бы ещё хотел уделить отдельное внимание точке, которая прописана в третьих кавычках. Как и в первом случае, она представляет из себя невидимую виртуальную ячейку (и может схлопываться до нуля), и нужна для того, чтобы наша сетка «не развалилась». Но также вы должны учитывать, что если после последнего элемента в разметке (<address>) мы добавим ещё один элемент (например <p>), то получим следующий результат:

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

Атрибуты

Кстати, ещё хочу сказать пару слов о том, что grid-template-areas также легко может заменить наши старые добрые атрибуты colspan и rowspan, которые мы прописывали для ячеек HTML-таблицы, чтобы объединить нужные нам ячейки по горизонтали или по вертикали. С приходом Grid Layout и grid-template-areas загрязнять разметку и мучится с этими атрибутами больше не придётся! Вы уже видели это на примере ячейки head в предыдущем разделе — она была получена объединением двух ячеек, совсем как с colspan="2" в таблице.

• Золотая рыбка CSS3 Grid Layout (часть 1)
• Золотая рыбка CSS3 Grid Layout (часть 3)

P.S. Это тоже может быть интересно:

Свойство CSS grid-template-areas

❮ Назад Полное руководство по CSS Далее ❯

Пример

Сделать так, чтобы именованный элемент «myArea» занимал два столбца в сетке из пяти столбцов:

.item1 {
  grid-area: моя территория;
}
.grid-container {
  display: grid;
  области шаблона сетки: «моя область моя область…»;
}

Попробуйте сами »

Определение и использование

Свойство grid-template-areas указывает области в макете сетки.

Вы можете называть элементы сетки, используя область сетки свойство, а затем ссылка на имя в grid-template-areas имущество.

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

Показать демо ❯

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Синтаксис CSS

области сетки-шаблона: нет| наименования предметов ;

Значения свойств

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

Другие примеры

Пример

Укажите две строки, где «item1» охватывает первые два столбца в первых двух строки (в сетке из пяти столбцов):

.item1 {
 grid-area: myArea;
}
.grid-container {
  display: grid;
  области шаблона сетки:
‘моя область моя область . . .’
    ‘моя область моя область . . .’;
}

Попробуйте сами »

Пример

Назовите все элементы и создайте готовый к использованию шаблон веб-страницы:

.item1 { область сетки: заголовок; }
.item2 { область сетки: меню; }
.item3 { область сетки: главный; }
.item4 { область сетки: Правильно; }
. item5 { область сетки: нижний колонтитул; }

.grid-container {
  display: grid;
  области шаблона сетки:
‘заголовок заголовка заголовка заголовка заголовка заголовка’
‘menu main main main right’
    ‘нижний колонтитул меню нижний колонтитул нижний колонтитул’;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: CSS Grid Item

Справочник CSS: свойство grid-area

Справочник CSS: свойство grid-template

❮ Полное руководство по CSS Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

9003 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3. CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

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

FORUM | О

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

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

областей шаблона сетки | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство CSS grid-template-areas позволяет определять и называть ячейки (или «области») в контейнере сетки CSS.

 .grid-контейнер {
  отображение: сетка;
  grid-template-areas: "заголовок заголовка" "основная боковая панель";
} 

Итак, тот пример выше? Мы получаем сетку два на два, где верхняя строка резервирует два столбца для области с именем , заголовок . Нижняя строка также получает два столбца, но резервирует их для областей сетки, называемых sidebar и main соответственно.

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

 .grid-container {
  отображение: сетка;
  grid-template-areas: "заголовок заголовка" "основная боковая панель";
}
. grid-заголовок {
  область сетки: заголовок;
}
.grid-боковая панель {
  область сетки: боковая панель;
}
.grid-контент {
  область сетки: основная;
} 

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

Но чего мы не можем сделать, так это сформировать непрямоугольные области сетки. Так что не повезло, если область, которую вы хотите определить, больше похожа на букву «Т» или «L».

Синтаксис

 области сетки-шаблона: нет | <строка> 

• Исходное значение: нет
• Применяется к: грид-контейнерам
• Унаследовано: нет
• Унаследовано: нет
• 9028 ключевое слово: 9, как 80 ключевое слово 9, как 80 вычислено28 значение0023 нет или список строковых значений
• Тип анимации: дискретный

значения

 /* значение ключевого слова */
области шаблонов сетки: нет;
/* <строка> значения */
grid-template-areas: "col-1 col-2 col-3";
grid-template-areas: "заголовок заголовка заголовка" "основной основной боковой панели";
grid-template-areas: "заголовок заголовка заголовка"
                      "основная боковая панель"
                      ". нижний колонтитул";
/* Глобальные значения */
области шаблона сетки: наследовать;
области шаблона сетки: начальная;
области шаблона сетки: вернуться;
области шаблона сетки: не установлено; 

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

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

 .сетка {
  grid-template-areas: "утилита меню логотипа-навигация";
} 

 .grid {
  grid-template-areas: "logo menuutility-nav" "sidebar-1 content sidebar-2";
} 

 .сетка {
  области шаблона сетки:
    "утилита меню логотипа-навигация"
    "боковая панель-1, боковая панель контента-2";
} 

 .grid {
  отображение: сетка;
  области шаблона сетки:
    "заголовок заголовка заголовка"
    "основная боковая панель"
    "нижний колонтитул нижний колонтитул";
} 

 header {
  область сетки: заголовок;
}
в сторону {
  область сетки: боковая панель;
}
главный {
  область сетки: основная;
}
нижний колонтитул {
 область сетки: нижний колонтитул;
} 

 .grid {
  отображение: сетка;
  зазор: 1бэр;
  столбцы сетки-шаблона: 1fr 2fr;
  grid-template-area: "основная боковая панель";
} 

 .grid {
  отображение: сетка;
  зазор: 1бэр;
  строки шаблона сетки: 250 пикселей, авто 250 пикселей;
  области шаблона сетки:
    "заголовок заголовка заголовка"
    "основная боковая панель"
    "нижний колонтитул нижний колонтитул";
} 

 /* Действительное объявление */
grid-template-areas: "виджет функций"; 

 /* Действительная декларация */
области шаблона сетки:
  "функция в сторону виджета-1"
  "функция в сторону виджета-2"; 

 /* Действительное объявление */
области шаблона сетки:
  "функция виджета-1"
  "функция виджета-2"; 

 /* Неверное объявление */
области шаблона сетки:
  "функция виджета-1"
  "функция в сторону виджета-2"; 

 grid-template-area:
  "заголовок заголовка заголовка"
  "основная боковая панель"
  ".нижний колонтитул"; /* первая ячейка пуста */
} 

 grid-template-areas:
  "заголовок заголовка заголовка"
  "основная боковая панель"
  ".......нижний колонтитул"; /* первая ячейка пуста */
} 

 grid-template- области:
  "заголовок заголовка заголовка"
  "основная боковая панель"
  ".нижний колонтитул";
области шаблона сетки:
  "заголовок заголовка заголовка"
  "основная боковая панель"
  ".нижний колонтитул"; 

 /* 👍 */
области шаблона сетки:
  "имя имя-2 имя-3"
  "имя имя-2 имя-3"
  "имя имя-2 имя-3";
/* 👍 */
области шаблона сетки:
  "заголовок заголовка"
  ". главный"
  "нижний колонтитул";
/* 👎 */
области шаблона сетки:
  "имя имя-2 имя-3"
  "имя имя-2 имя-3"
  "имя имя-3"; 

 .grid {
  grid-template-area: "1st b c";
} 

 .grid-item {
  площадь сетки: \31st;
} 

 .grid-container {
  отображение: сетка;
  grid-template-columns: [начало боковой панели] 250px [конец боковой панели] 1fr;
}
в сторону {
  область сетки: боковая панель;
} 

 

  
Заголовок
  
Основное содержание
  
  
  
 

 . container {
  сетка-шаблон-столбцы: 12rem авто 12rem;
  области шаблона сетки:
    "заголовок заголовка заголовка"
    "левая боковая панель основная правая боковая панель"
    "нижний колонтитул нижний колонтитул";
} 

 заголовок {
  область сетки: заголовок;
}
главный {
  область сетки: основная;
}
нижний колонтитул {
  область сетки: нижний колонтитул;
}
.левая боковая панель {
  область сетки: левая боковая панель;
}
.правая боковая панель {
  область сетки: правая боковая панель;
} 

 .container {
 отображение: сетка;
 области шаблона сетки:
 /* Каждая область представляет собой строку */
 "заголовок"
 "нав"
 "статья"
 "боковая панель"
 "нижний колонтитул";
}
@media (минимальная ширина: 600 пикселей) {
 .