diff options
Diffstat (limited to 'files/ru/web/css/css_grid_layout/грид-области/index.html')
| -rw-r--r-- | files/ru/web/css/css_grid_layout/грид-области/index.html | 529 |
1 files changed, 529 insertions, 0 deletions
diff --git a/files/ru/web/css/css_grid_layout/грид-области/index.html b/files/ru/web/css/css_grid_layout/грид-области/index.html new file mode 100644 index 0000000000..6d2d3b6892 --- /dev/null +++ b/files/ru/web/css/css_grid_layout/грид-области/index.html @@ -0,0 +1,529 @@ +--- +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 > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} +</pre> +</div> + +<p> </p> + +<pre class="brush: html"><div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div></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 > 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"><div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div></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 > 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"><div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div></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 > 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"><div class="wrapper"> + <div class="header">Header</div> + <div class="sidebar">Sidebar</div> + <div class="content">Content</div> + <div class="footer">Footer</div> +</div></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"><div class="media"> + <div class="image"></div> + <div class="text">This is a media object example. + We can use grid-template-areas to switch around the image and text part of the media object. + </div> +</div></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"><div class="media flipped"> + <div class="image"></div> + <div class="text">This is a media object example. + We can use grid-template-areas to switch around the image and text part of the media object. + </div> +</div></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> |