path: root/files/ru/web/css/css_grid_layout/грид-области/index.html

---
title: Шаблоны грид-областей
slug: Web/CSS/CSS_Grid_Layout/Грид-области
translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
---
<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">предыдущем обзоре</a> мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда Вы работаете с CSS Grid Layout, у Вас всегда есть грид-линии, поэтому они - быстрый, прямой и надежный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именнованных, заранее определенных грид-областей. Давайте рассмотрим, как он работает, и Вы скоро поймете, почему его называют методом ascii-искусства в концепции макетов на гридах!</p>

<h2 id="Имя_для_грид-области">Имя для грид-области</h2>

<p>Вы уже знакомы со свойством {{cssxref("grid-area")}}. Это то свойство, которое принимает в качестве значения номера четырех грид-линий, определяющих расположение грид-области.</p>

<pre class="brush: css">.box1 {
   grid-area: 1 / 1 / 4 / 2;
}
</pre>

<p>Что мы делаем, когда задаем все четыре значения? Мы определяем область, ограниченную данными грид-линиями. </p>

<p><img alt="The Grid Area defined by lines" src="https://mdn.mozillademos.org/files/14667/4_Area.png" style="height: 354px; width: 951px;"></p>

<p>Другой способ определить грид-область, - задать ей имя и определить местоположение как значения свойства {{cssxref("grid-template-areas")}}. Вы можете выбрать для грид-области любое имя. Например, если нам нужно создать макет согласно картинке ниже, мы можем назвать четыре основных области следующим образом:</p>

<ul>
 <li>header</li>
 <li>footer</li>
 <li>sidebar</li>
 <li>основное содержимое content</li>
</ul>

<p><img alt="An image showing a simple two column layout with header and footer" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p>

<p>С помощью свойства {{cssxref("grid-area")}} мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именнованные области, которые мы можем в нем использовать.</p>

<div id="Grid_Area_1">
<pre class="brush: css">.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
</pre>

<p>Определив имена, мы можем приступить к созданию макета. На этот раз вместо того, чтобы расположить элементы с помощью номеров линий, заданных для самих элементов, мы создаем весь макет в грид-контейнере.</p>

<pre class="brush: css">.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      "ft ft ft ft   ft   ft   ft   ft   ft";
}
</pre>

<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto;
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
</pre>
</div>

<p> </p>

<pre class="brush: html">&lt;div class="wrapper"&gt;
    &lt;div class="header"&gt;Header&lt;/div&gt;
    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
    &lt;div class="content"&gt;Content&lt;/div&gt;
    &lt;div class="footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;</pre>

<p>{{ EmbedLiveSample('Grid_Area_1', '300', '330') }}</p>
</div>

<p>Если мы используем этот метод, то нам не нужно задавать что-то отдельно для грид-элементов, все задается для грид-контейнера. Весь макет описывается значением свойства {{cssxref("grid-template-areas")}}.</p>

<h2 id="Оставляем_ячейку_пустой">Оставляем ячейку пустой</h2>

<p>В данном примере мы полностью заполнили грид областями и не оставили пустого пространства. Однако, наш метод также позволяет оставлять грид-ячейки пустыми. Чтобы сделать это воспользуйтесь символом точки, '<code>.</code>'. Если нам нужно отображать футер только под основным содержимым страницы, значит, мы должны оставить три ячейки под сайдбаром пустыми.</p>

<pre class="brush: css">.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
</pre>

<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto;
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
</pre>
</div>

<pre class="brush: css">.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      ".  .  .  ft   ft   ft   ft   ft   ft";
}
</pre>

<pre class="brush: html">&lt;div class="wrapper"&gt;
    &lt;div class="header"&gt;Header&lt;/div&gt;
    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
    &lt;div class="content"&gt;Content&lt;/div&gt;
    &lt;div class="footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;</pre>

<p>{{ EmbedLiveSample('Leaving_a_grid_cell_empty', '300', '330') }}</p>

<p>Чтобы сделать наш макет чище, мы можем использовать множество символов <code>.</code>. Если между точками нет пробелов, то они считаются одной ячейкой. В комплексных макетах подобная возможность помогает аккуратно выравнивать строки и колонки. То есть, Вы прямо в CSS можете видеть, как выглядит Ваш макет.</p>

<h2 id="Охватываем_несколько_ячеек">Охватываем несколько ячеек</h2>

<p>В нашем примере каждая из областей охватывает несколько грид-ячеек, и получаем мы подобный эффект за счет того, что через пробел повторяем имя этой грид-области несколько раз. Вы можете добавить дополнительные пробелы, чтобы аккуратно выравнять значения в <code>grid-template-areas</code>. В нашем примере мы пробелами подравняли <code>hd</code> и <code>ft</code> , чтобы они коррелировали с  <code>main</code>.</p>

<p>Область, которую мы создаем подобными цепочками имен, должна быть прямоугольной. На данном этапе нельзя создать L-образную область. В спецификации говорится, что, возможно, в будущем подобная функциональность добавится. А сейчас мы можем охватывать строки так же легко, как и колонки. Например, давайте сделаем так, чтобы наш сайдбар простирался до конца футера. Для этого поменяем <code>.</code> на <code>sd</code>.</p>

<pre class="brush: css">.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}
</pre>

<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto;
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
</pre>
</div>

<pre class="brush: css">.wrapper {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      "sd sd sd  ft  ft   ft   ft   ft   ft";
}
</pre>

<div class="hidden">
<pre class="brush: html">&lt;div class="wrapper"&gt;
    &lt;div class="header"&gt;Header&lt;/div&gt;
    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
    &lt;div class="content"&gt;Content&lt;/div&gt;
    &lt;div class="footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Spanning_multiple_cells', '300', '330') }}</p>

<p>Значение {{cssxref("grid-template-areas")}} должно отображать законченный грид, а иначе оно невалидно (и игнорируется!). Это значит, что у Вас должно быть одинаковое количество ячеек в каждой строке, а если какая-то ячейка должна быть пустой, то вместо имени в ней должна быть точка. Грид будет также невалидным, если области в нем не прямоугольные.</p>

<h2 id="Переопределение_грида_с_медиа-запросами">Переопределение грида с медиа-запросами</h2>

<p>Поскольку наш макет теперь содержится в одной части CSS, вносить изменения для различных контрольных точек (breakpoints) становится крайне легко. Сделать это можно либо переопределив сам грид, либо положение элементов на гриде, либо и то, и другое одновеременно.</p>

<p>При этом определяйте имена для ваших грид-областей за пределами медиа-запросов. В таком случае, область основного содержимого (content) всегда будет называться <code>main</code> независимо от того, где она находится на сетке.</p>

<p>Мы можем теперь изменить наш макет для узкой ширины экрана на более простой, где все грид-области будут друг над другом в одном столбце.</p>

<div class="hidden">
<pre class="brush: css">* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto;
}

.wrapper &gt; div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
</pre>
</div>

<pre class="brush: css">.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}

.wrapper {
    display: grid;
    grid-auto-rows: minmax(100px, auto);
    grid-template-columns: 1fr;
    grid-template-areas:
      "hd"
      "main"
      "sd"
      "ft";
}
</pre>

<p>Внутри медиа-запросов, мы переопределяем этот макет на двухколонный, а при увеличении свободного пространства, на трехколонный. Обратите внимание, что для широкого макета я оставляю свою девятиколонную трековую сетку, а с помощью <code>grid-template-areas</code> я указываю куда стоит разместить грид-области. </p>

<pre class="brush: css">@media (min-width: 500px) {
    .wrapper {
        grid-template-columns: repeat(9, 1fr);
        grid-template-areas:
          "hd hd hd hd   hd   hd   hd   hd   hd"
          "sd sd sd main main main main main main"
          "sd sd sd  ft  ft   ft   ft   ft   ft";
    }
}
@media (min-width: 700px) {
    .wrapper {
        grid-template-areas:
          "hd hd hd   hd   hd   hd   hd   hd hd"
          "sd sd main main main main main ft ft";
    }
}
</pre>

<div class="hidden">
<pre class="brush: html">&lt;div class="wrapper"&gt;
    &lt;div class="header"&gt;Header&lt;/div&gt;
    &lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
    &lt;div class="content"&gt;Content&lt;/div&gt;
    &lt;div class="footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Redefining_the_grid_using_media_queries', '550', '330') }}</p>

<h2 id="Использование_grid-template-areas_для_элементов_UI">Использование <code>grid-template-areas</code> для элементов UI</h2>

<p>Многие из примеров grid, которые вы найдете в Интернете, предполагают, что вы будете использовать grid для макета главной страницы, однако grid может быть столь же полезна для небольших элементов. Использование {{cssxref ("grid-template-areas")}} может быть особенно приятным, так как в коде легко видеть, как выглядит ваш элемент.</p>

<p>В качестве очень простого примера мы можем создать «медиа-объект». Это компонент с пространством для изображения или другого носителя с одной стороны, а контент - с другой. Изображение может отображаться справа или слева от окна.</p>

<p><img alt="Images showing an example media object design" src="https://mdn.mozillademos.org/files/14671/4_Media_objects.png" style="height: 432px; width: 800px;"></p>

<p>Наша сетка представляет собой двухколоночную трековую сетку, со столбцом для изображения размером <code>1fr</code> и текстом <code>3fr</code>. Если вы хотите область с фиксированной шириной изображения, тогда вы можете установить столбец изображения как ширину пикселя и назначить текстовую область <code>1fr</code>. Одна колонка трека <code>1fr</code> затем займет оставшуюся часть пространства.</p>

<p>Мы предоставляем области изображения имя области сетки <code>img</code> и содержимое текстовой области, затем мы можем выложить их, используя свойство <code>grid-template-areas</code>.</p>

<div id="Media_1">
<pre class="brush: css">* {box-sizing: border-box;}

.media {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 400px;
}
.media {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "img content";
    margin-bottom: 1em;
}

.media .image {
    grid-area: img;
    background-color: #ffd8a8;
}

.media .text {
    grid-area: content;
    padding: 10px;

}
</pre>

<pre class="brush: html">&lt;div class="media"&gt;
    &lt;div class="image"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;This is a media object example.
      We can use grid-template-areas to switch around the image and text part of the media object.
    &lt;/div&gt;
&lt;/div&gt;</pre>

<p>{{ EmbedLiveSample('Media_1', '300', '200') }}</p>
</div>

<h3 id="Отображение_изображения_с_другой_стороны_окна">Отображение изображения с другой стороны окна</h3>

<p>Возможно, нам захочется отобразить нашу коробку с изображением наоборот. Для этого мы переопределим сетку, чтобы поместить последний трек <code>1fr</code> и просто переверните значения {{cssxref ("grid-template-areas")}}.</p>

<div id="Media_2">
<pre class="brush: css">* {box-sizing: border-box;}

.media {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 400px;
}
.media {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "img content";
    margin-bottom: 1em;
}

.media.flipped {
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "content img";
}

.media .image {
    grid-area: img;
    background-color: #ffd8a8;
}

.media .text {
    grid-area: content;
    padding: 10px;

}
</pre>

<pre class="brush: html">&lt;div class="media flipped"&gt;
    &lt;div class="image"&gt;&lt;/div&gt;
    &lt;div class="text"&gt;This is a media object example.
      We can use grid-template-areas to switch around the image and text part of the media object.
    &lt;/div&gt;
&lt;/div&gt;</pre>

<p>{{ EmbedLiveSample('Media_2', '300', '200') }}</p>
</div>

<h2 id="Сокращения_определения_сетки">Сокращения определения сетки</h2>

<p>Рассмотрев различные способы размещения элементов на наших сетках и многие свойства, используемые для определения сетки, самое время взглянуть на пару сокращений, доступных для определения сетки и многое из всего этого в одной строке CSS.</p>

<p>Они могут быстро стать трудными для чтения для других разработчиков или даже для вашего будущего. Однако они являются частью спецификации и, вероятно, вы столкнетесь с ними в примерах или в использовании другими разработчиками, даже если вы решите не использовать их.</p>

<p>Прежде чем использовать какиу-либо сокращения (shorthand), стоит помнить, что shorthand не только позволяют устанавливать множество свойств за один раз, но также действуют, чтобы <strong>сбросить объекты</strong> до их начальных значений, которых вы не используете, или не можете установить в сокращении. Поэтому, если вы используете сокращения, помните, что оно может сбросить все, что вы применили в другом месте.</p>

<p>Два сокращения (shorthand) для контейнера сетки - это Explicit Grid Shorthand <code>grid-template</code> и Grid Definition Shorthand <code>grid</code>.</p>

<h3 id="grid-template"><code>grid-template</code></h3>

<p>Свойство {{cssxref ("grid-template")}} задает следующие свойства:</p>

<ul>
 <li>{{cssxref("grid-template-rows")}}</li>
 <li>{{cssxref("grid-template-columns")}}</li>
 <li>{{cssxref("grid-template-areas")}}</li>
</ul>

<p>Свойство называется явным сокращением сетки, потому что оно устанавливает те вещи, которые вы контролируете, когда вы определяете явную сетку, а не те, которые влияют на любые неявные строки или столбцы, которые могут быть созданы.</p>

<p>Следующий код создает макет, используя {{cssxref ("grid-template")}}, который совпадает с макетом, созданным ранее в этом руководстве.</p>

<pre class="brush: css">.wrapper {
    display: grid;
    grid-template:
      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
      "sd sd sd main main main main main main" minmax(100px, auto)
      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
}
</pre>

<p>Первое значение - это значение нашей <code>grid-template-areas</code>, но мы также объявляем размер строки в конце каждой строки. Это то, что делает <code>minmax (100px, auto)</code>.</p>

<p>Затем после <code>grid-template-areas</code> у нас есть косая черта, после чего явный список треков столбцов.</p>

<h3 id="grid"><code>grid</code></h3>

<p>Сокращение {{cssxref ("grid")}} идет еще дальше, а также задает свойства, используемые неявной сеткой. Таким образом, вы будете устанавливать:</p>

<ul>
 <li>{{cssxref("grid-template-rows")}}</li>
 <li>{{cssxref("grid-template-columns")}}</li>
 <li>{{cssxref("grid-template-areas")}}</li>
 <li>{{cssxref("grid-auto-rows")}}</li>
 <li>{{cssxref("grid-auto-columns")}}</li>
 <li>{{cssxref("grid-auto-flow")}}</li>
</ul>

<p>Свойство также сбрасывает {{cssxref ("grid-gap")}} свойство на <code>0</code>, однако вы не можете указывать пробелы в этой сокращенности.</p>

<p>Вы можете использовать этот синтаксис точно так же, как сокращение {{cssxref ("grid-template")}}, просто знайте, что при этом вы сбросите другие значения, установленные этим свойством.</p>

<pre class="brush: css">.wrapper {
    display: grid;
    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
    "sd sd sd main main main main main main" minmax(100px, auto)
    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
}
</pre>

<p>Мы снова рассмотрим другие функции, предлагаемые этом сокращением позже в этих руководствах, когда мы рассмотрим автоматическое размещение и свойство <code>grid-auto-flow</code>.</p>

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

<section class="Quick_links" id="Quick_Links">
<ol>
 <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
 <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li>
 <li data-default-state="open"><a href="#"><strong>Guides</strong></a>
  <ol>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
   <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>Properties</strong></a>
  <ol>
   <li><a href="/en-US/docs/Web/CSS/grid">grid</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-area">grid-area</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column">grid-column</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-gap">grid-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row">grid-row</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template">grid-template</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
   <li><a href="/en-US/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
  </ol>
 </li>
 <li data-default-state="open"><a href="#"><strong>Glossary</strong></a>
  <ol>
   <li><a href="/en-US/docs/Glossary/Grid">Grid</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_lines">Grid lines</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_tracks">Grid tracks</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_cell">Grid cell</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_areas">Grid areas</a></li>
   <li><a href="/en-US/docs/Glossary/Gutters">Gutters</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_Axis">Grid Axis</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_rows">Grid row</a></li>
   <li><a href="/en-US/docs/Glossary/Grid_column">Grid column</a></li>
  </ol>
 </li>
</ol>
</section>