Знакомство с CSS Grid Layout

Терминология

Прежде чем мы погрузимся в концепцию CSS Grid, давайте пробежимся по основной терминологии.
Линии сетки (Grid lines). Вертикальные и горизонтальные линии, которые делят сетку и образуют столбцы и строки.

Ячейка сетки (Grid cell). Отдельный элемент сетки CSS.

Область сетки (Grid area). Цельное пространство, ограниченное четырьмя линиями сетки. Область сетки может содержать любое число ячеек.

Ряд сетки (Grid track). Пространство между двумя линиями сетки. Это пространство может быть как вертикальным, так и горизонтальным.

Строка сетки (Grid row). Горизонтальный ряд сетки.

Столбец сетки (Grid column). Вертикальный ряд сетки.

Межрядный промежуток (Gutter). Пространство между строками и столбцами в сетке.

Контейнер сетки (Grid container). Контейнер, содержащий всю CSS-сетку. Это будет элемент, имеющий свойство display: grid или display: inline-grid.

Элемент сетки (Grid item). Любой элемент, являющийся прямым потомком контейнера сетки.

Приступим к созданию нашей первой сетки с CSS Grid Layout.

Ваша первая сетка

Создайте сетку

Первое, что нужно сделать, это создать контейнер сетки. Мы можем это осуществить, объявив display: grid для элемента контейнера. В этом примере мы используем div с классом container.

Определите строки и столбцы

Есть несколько способов определения строк и столбцов. Для нашей первой сетки мы используем свойство grid-template-columns и grid-template-rows. Эти свойства позволят нам определить размер столбцов и строк нашей сетки. Для создания двух строк фиксированной высоты (150px) и трех столбцов фиксированной ширины (150px), просто напишите:

grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;

Чтобы добавить четвертый столбец шириной 70px, напишите:

grid-template-columns: 150px 150px 150px 70px;

…и так далее, сколько бы столбцов вы ни добавляли.

Добавьте межрядный промежуток

Добавление межрядного промежутка – удивительно простое дело с CSS Grid Layout. Всего лишь добавьте:

grid-gap: 1rem;

Эта простая строчка даст вам одинаковый межрядный промежуток между всеми строками и столбцами. Чтобы определить размер промежутка отдельно для строк и столбцов, вы можете использовать вместо этой записи свойства grid-column-gap и grid-row-gap.

Теперь давайте соберем это все вместе. Вот наш HTML:

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
</div>

Всего несколько строк CSS позволят нам создать простую сетку:

.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}

Просмотреть результат можно на Codepen

Впечатляет, правда? Просмотрите указанный выше пример с помощью инструментов разработчика в вашем браузере. Попробуйте изменить ширину столбцов, высоту строк. Замените свойство grid-gap на grid-column-gap и grid-row-gap поиграйте с разной шириной и высотой.

При работе с CSS Grid Layout просто необходимо иметь хороший набор инструментов разработчика. В Firefox есть фантастический функционал, специально созданный чтобы помочь вам создавать и конструировать сетки. Заинтригованы? Скачайте Firefox Developer Edition и у вас будет браузер с самыми лучшими инструментами для работы с CSS Grid Layout.

Инструменты для разработчиков в Firefox

Дизайнеры и разработчики мгновенно влюбляются в CSS Grid Layout. Именно поэтому в Mozilla славно потрудились над разработкой в Firefox панели макета с инструментами для разработчиков, дополнив CSS Grid Inspector и Box Model.

Наложение сетки CSS (CSS grid overlay)

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

Интерактивная сетка (interactive grid)

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

Отображение пространства сетки (display grid area)

Настройка «Показывать пространства сетки» (“Display grid areas”) показывает связанные пространства и относящиеся к ним имена в каждой ячейке. Скоро мы рассмотрим подробнее, как задать имя пространству сетки.

Визуализируйте изменения

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

Эти функции и усовершенствования в настоящее время доступны и версиях Firefox Nightly и Firefox Developer. Мы рекомендуем скачать и установить себе один из этих браузеров прежде чем продолжить. Эти функции, доступные только в Firefox, помогут вам в изучении подробностей CSS Grid Layout.

Единица FR (FR unit)

В нашей первой сетке мы создали столбцы с фиксированной шириной. Это великолепно, но не очень гибко. К счастью, CSS Grid Layout представляет новую единицу длины под названием fr (сокращение от “fraction”). Mozilla Developer Network определяет единицу fr как единицу длины, представляющую долю доступного пространства в контейнере сетки. Если мы хотим переписать нашу предыдущую сетку чтобы в ней было три равных столбца, мы должны изменить наш CSS используя единицы fr:

.container {
  display: grid;
  width: 800px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
}

Указание repeat()

Возьмите на заметку: если вы поймали себя на повторении единиц длины, используйте указание repeat(). Приведите приведенный выше код к такому виду:

.container {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
  grid-gap: 1rem;
}

Просмотреть результат можно на Codepen

Просмотрите эту сетку и измените свойство grid-template-columns контейнера сетки на следующее:

grid-template-columns: 10px repeat(2, 1fr);

Что случилось? Как видите, вы можете не только использовать указание repeat() для части списка рядов, но также и смешивать единицы длины (в данном случае px и fr).

В следующем разделе мы узнаем больше о смешении единиц.

Смешение единиц

При указании размеров рядов вы можете использовать фиксированные размеры с такими единицами как px или em. Также вы можете использовать гибкие размеры, такие как проценты или единицы fr. Тем не менее настоящее волшебство CSS Grid Layout проявляется в возможности смешивать эти единицы. Лучше всего понять как это работает можно на примере:

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 100px 30% 1fr;
  grid-template-rows: 200px 100px;
  grid-gap: 1rem;
}

Здесь мы объявили сетку с тремя столбцами. Первый столбец имеет фиксированную ширину в 100px. Второй занимает 30% доступного пространства, а третий имеет ширину в 1fr, что означает, что он занимает одну часть доступного пространства. В данном случае, он займет все упомянутое пространство.

Вот наш HTML:

<div class="container">
  <div class="item" />
  <div class="item" />
  <div class="item" />
  <div class="item" />
  <div class="item" />
  <div class="item" />
</div>

Результат смотрите на Codepen

Просмотрите эту сетку и измените свойство grid-template-columns на следующее:

grid-template-columns: 100px 30% 2fr 1fr;

Видите, что случилось? Вместо 3 столбцов у вас есть третий столбец в 2fr, занимающий 2/3 упомянутого пространства, и четвертый столбец, занимающий оставшуюся 1/3. Продолжайте испытывать инструменты разработчика Firefox и пробуйте различные комбинации единиц.

Когда будете готовы, переходите к следующей теме, посвященной позициям элементов в сетке.

Позиция элементов

Понимание линий сетки

Теперь, когда мы освоились с созданием сетки и определением размеров строк и столбцов, мы можем перейти к размещению элементов на этой сетке.

Есть несколько способов размещения элементов, но мы начнем с базового примера.

Рассмотрим простую сетку 3х2.

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

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

Линии сетки пронумерованы слева направо и сверху вниз (если вы работаете на языке, где письмо идет справа налево, то линии тоже будут нумероваться справа налево). Вышеуказанный пример будет иметь такую нумерацию линий, как показана на рисунке.

Позиция элемента

Вот HTML, который мы будем использовать в этом примере:

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

Допустим, мы хотим разместить первый элемент сетки (имеющий класс item1) во второй строке и втором столбце. Этот элемент должен будет начинаться от второй «строчной» линии и продолжаться до третьей. Также он будет начинаться от второй «столбцовой» линии и продолжаться до третьей. Мы можем записать наш CSS таким образом:

.item1 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}

Сокращенная запись свойств

Мы также можем записать это сокращенно:

.item1 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

Результат на Codepen

Попробуйте изменить свойство grid-row для item1 на следующее:

.item1 {
  grid-row: 3 / 4;
  grid-column: 1 / 3;
}

Видите, что произошло? Элемент занял несколько столбцов, от линии 1 до линии 3. Он также разместился между 3 и 4 «строчными» линиями, что привело к созданию новой строки. Эта новая строка сейчас является скрытой, а ее высота установлена свойством grid-auto-rows родительской сетки. Вы можете узнать больше о правилах, применяемых по умолчанию, в MDN.

Теперь давайте применим наши знания на практике, создав простой макет.

Создание простого макета

Теперь, научившись создавать сетку и располагать на ней элементы, давайте создадим простой макет. Мы не будем представлять здесь какие-либо концепции. Мы просто воспользуемся сокращенным указанием свойств grid-row и grid-column чтобы вручную разместить такие элементы, как хедер, футер и так далее.

Вот наш HTML:

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>

А вот CSS:

.container {
  display: grid;
  width: 750px;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
}

.header {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}

.sidebar {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}

.content-1 {
  grid-row: 2 / 3;
  grid-column: 2 / 4;
}

.content-2 {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
}

.content-3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.footer {
  grid-row: 4 / 5;
  grid-column: 1 / 4;
}

Вот результат на Codepen

Сейчас самое время попробовать настройку «показать номера линий» в панели Firefox CSS Grid Layout. Просмотрите таким образом приведенный выше результат и выберите панель макета. Тут вы можете активировать наложение сетки и отметить «показывать номера линий». Удобно, правда? Этот инструмент облегчает визуализацию вашей сетки при позиционировании элементов.

Области шаблона

В предыдущем примере мы узнали как создавать базовый макет путем позиционирования элементов с помощью линий сетки. Другой метод позиционирования заключается в использовании именованных областей сетки со свойствами grid-template-areas и grid-area. Лучше всего показать это на примере. Давайте восстановим сетку из нашего предыдущего примера со свойством grid-template-areas:

.container {
  display: grid;
  width: 100%;
  height: 600px;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 1fr 100px;
  grid-gap: 1rem;
  grid-template-areas:
      "header header header"
      "sidebar content-1 content-1"
      "sidebar content-2 content-3"
      "footer footer footer";
}

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

Наш HTML:

<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>

Оставшаяся часть нашего CSS:

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content-1 {
  grid-area: content-1;
}

.content-2 {
  grid-area: content-2;
}

.content-3 {
  grid-area: content-3;
}

.footer {
  grid-area: footer;
}

Результат на Codepen

Вы знаете, что инструменты разработчика Firefox могут показывать имена областей? Попробуйте! Просмотрите сетку из этого примера и откройте панель макета. Тут вы можете управлять функциями наложения сетки и показа названий областей.

Именованные линии

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

.container {
  display: grid;
  width: 100%;
  height: 600px;
  grid-gap: 1rem;
  grid-template-columns:
    [main-start sidebar-start] 200px
    [sidebar-end content-start] 1fr
    [column3-start] 1fr
    [content-end main-end];
  grid-template-rows:
    [row1-start] 80px
    [row2-start] 1fr
    [row3-start] 1fr
    [row4-start] 100px
    [row4-end];
}

Теперь у нас есть имена линий, так что мы можем использовать их при размещении элементов. Давайте переделаем наш базовый макет, используя имена линий вместо их номеров:

.header {
  grid-column: main-start / main-end;
  grid-row: row1-start / row2-start;
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: row2-start / row4-start;
}

.content-1 {
  grid-column: content-start / content-end;
  grid-row: row2-start / row3-start;
}

.content-2 {
  grid-column: content-start / column3-start;
  grid-row: row3-start / row4-start;
}

.content-3 {
  grid-column: column3-start / content-end;
  grid-row: row3-start / row4-start;
}

.footer {
  grid-column: main-start / main-end;
  grid-row: row4-start / row4-end;
}

Вот наш HTML:

<div class="container">
  <div class="item header">header</div>
  <div class="item sidebar">sidebar</div>
  <div class="item content-1">Content-1</div>
  <div class="item content-2">Content-2</div>
  <div class="item content-3">Content-3</div>
  <div class="item footer">footer</div>
</div>

Результат на Codepen

Вы знаете, что используя Firefox DevTools вы можете кастомизировать цвет налагаемой сетки? Пример выше имеет белый фон, а установленный по умолчанию пурпурный – не самый лучший вариант. При выборе опции наложения сетки вы увидите круг рядом с названием сетки, который показывает цвет наложения. Кликните на него и вы сможете выбрать цвет по своему вкусу. Попробуйте какой-нибудь другой цвет, например, красный.

Узнайте больше

Надеемся, это короткое пособие дало вам достаточно сведения для начала экспериментов и построения с использованием CSS Grid Layout. Но мы только приоткрыли самые базовые функции этого мощного инструмента. Если вы готовы копнуть глубже, для вас есть тысячи отличных ресурсов.

Например, сайт и твиттер Джен Симмонс – дизайнерского представителя Mozilla. Она также является разработчиком, писательницей, спикером и членом рабочей группы CSS.

Или сайт и твиттер Рэйчел Андрю — разработчика, спикера и автора. Она также является членом рабочей группы CSS и разрабатывает обучающие ресурсы, посвященные CSS Grid Layout.

MDN – Mozilla Developer Network – имеет понятные руководства и документацию по каждому свойству CSS Grid Layout.

***
Подписывайтесь на наш канал в Telegram!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]