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»


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

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

Свойство
grid-template-areas 57 16 52 10 44



Синтаксис CSS

grid-template-areas: none|itemnames;

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

Значение Описание
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 текст

блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
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» и «main-bottom», которые прописаны в скобках свойства grid-template-rows. Чтобы было совсем ясно, на изображении ниже я покажу результат работы кода и отмечу нужные границы.

Из картинки ясно, что верхняя граница второго и третьего элементов привязана к линии «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 и его друзья

В этом разделе я предлагаю раскрыть удивительные  возмоности 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, то получим ожидаемый результат:

Атрибуты

colspan и rowspan теперь в CSS при помощи свойства grid-template-areas!

Кстати, ещё хочу сказать пару слов о том, что 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, уровень 1
Синтаксис JavaScript: объект .style.gridTemplateAreas=»… myArea myArea»


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

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

Собственность
области сетки-шаблона 57 16 52 10 44



Синтаксис 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 Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

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

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры 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-template-areas родительского контейнера сетки:

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

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

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

Это результат, основанный на областях сетки-шаблона , которые мы определили в родительском контейнере сетки:

Размер именованных областей сетки

Размер дорожек сетки можно задать с помощью свойств grid-template-columns и grid-template-rows родительского контейнера сетки.

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

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

То же самое и со строками. Предположим теперь, что нам нужен следующий макет в сетке три на три:

На этот раз давайте сделаем первую и третью строки одинаковой фиксированной высоты 250px , но размер средней строки так, чтобы она занимала столько места, сколько нужно контенту:

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

Если вы спрашиваете себя, что, черт возьми, происходит со всеми этими повторяющимися именованными областями шаблона сетки, это все о…

Объединение ячеек и строк

Повторение именованной области соединяет ячейки. Итак, если цель состоит в том, чтобы создать именованную область с именем объект и чтобы она занимала два столбца в верхней строке, мы можем сделать что-то вроде этого:

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

Круто, и мы можем сделать то же самое в вертикальном направлении, если одна и та же именованная область начинается в каждой строке:

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

Конечно, мы можем объединить их, чтобы получить область шаблона сетки, охватывающую оба направления:

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

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

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

Мы можем создавать промежутки (или жесткие «упоры») между ячейками

Это возможно, используя запись с точкой ( . ):

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

Количество точек не имеет значения. Вместо этого мы могли бы сделать это:

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

Оба объявления создают одну и ту же сетку:

Первый столбец в третьей строке пуст из-за записи через точку.

Пробелы — хороший способ визуализировать сетку

Следующие объявления эквивалентны, но второе легче визуализировать структуру сетки, потому что мы используем пустые пробелы для выравнивания имен:

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

Если вы ищете другой способ визуализации контейнера сетки, у Криса есть умная идея «нарисовать» его в формате ASCII. Визуализируйте сетку в формате ASCII в своих комментариях CSS.

Строки должны иметь одинаковое количество столбцов

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

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

Использование символов Unicode для именованных областей сетки

Согласно спецификациям, любое имя, не соответствующее синтаксису , требует экранирования при ссылке на эту область по имени в других свойствах. Например, в следующем объявлении имя первой области начинается с цифры и поэтому не соответствует синтаксису  :

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

Обходной путь — объявить неэкранированный шестнадцатеричный код для 1 цифра. В этом случае шестнадцатеричный код равен U+0031 , который мы экранируем в CSS как \31st . Итак, это то, что мы используем для назначения элемента этой именованной области сетки:

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

Неявно назначенные имена линий

Определение дорожек с помощью свойства grid-template-areas дает нам имена линий бесплатно на основе назначенных имен. Это отличается от grid-template-rows и grid-template-columns 9.0024, где нам нужно указать имена строк при определении столбцов и строк. Не так много со свойством grid-template-areas , потому что оно принимает имена, которые мы ему предоставляем, и выдает для нас имена дорожек.

Четыре линии сетки создаются для каждого имени области шаблона сетки. Если у нас есть область шаблона сетки с именем sidebar , мы получим две пары дорожек с именами sidebar-start и sidebar-end — одна пара для направления столбца и одна пара для направления строки:

Вам может быть интересно, что произойдет, если мы будем явно определять имена дорожек и использовать то же имя, которое мы получили бы, если бы они были определены неявно, например, явно определить линию сетки с именем sidebar-start для боковой панели named область. Две линии могут сосуществовать и быть назначены разным элементам. Другими словами, явное значение по-прежнему допустимо, и можно использовать обе строки.

Области с неявными именами

Другой способ именования областей сетки в контейнере сетки — разрешить CSS Grid неявно именовать их для нас при настройке имен дорожек на

.0023 grid-template-columns и grid-template-rows свойства.

Все, что нам нужно сделать, это выбрать имя для области сетки и добавить к нему -start и -end для имен дорожек. Здесь, например, мы получаем область шаблона сетки с именем sidebar , даже не объявляя свойство grid-template-areas :

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

Как вы видите в приведенном выше примере, хотя нет свойства grid-template-areas для явного определения области с именем «боковая панель», на эту область все еще можно ссылаться свойствами сетки, такими как grid-area. , grid-row , grid-column или их аналоги.

Пример: адаптивный макет Holy Grail

В следующей демонстрации мы используем свойство grid-template-areas для создания печально известного макета Holy Grail с помощью CSS Grid:

Этот макет получил свое название из-за того, что его было невероятно сложно выполнить во времена использования плавающих элементов для макетов. Слава богу, у нас есть CSS Grid, чтобы сделать это почти тривиально.

Во-первых, наш HTML:

 
Заголовок
Основное содержание
Нижний колонтитул

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

Мы можем настроить именованные области шаблона сетки в CSS и, где необходимо, распределить строки:

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

Теперь нам нужно присвоить каждому элементу именованную область сетки:

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *