CSS Grid Layout: новый модуль раскладки для веба

CSS Grid Layout: новый модуль раскладки для веба

Люди использовали сетчатый дизайн в журналах, газетах, постерах и другой печатной продукции задолго до появления интернета. Неудивительно, что макеты первых веб-страниц также были основаны на компоновке сетки. Для её создания применялись средства различной степени эффективности: таблицы, флоаты, инлайн блоки, флексы. Однако все они оказывались далеко не идеальными при построении сложного сетчатого макета.
Для решения этих проблем был разработан новый модуль, ориентированный специально на создание сеток различной степени сложности. Названный CSS Grid Layout (гриды) он позволяет разработчикам легко создавать двухмерные макеты для веба.

ОСНОВНЫЕ ПОНЯТИЯ

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

  • Grid lines – грид-линии, которые определяют сетку. Они могут быть горизонтальными и вертикальными. Нумерация начинается с 1.
  • Grid tracks – грид-полосы, представляющие собой строки (горизонтальные) и колонки (вертикальные, ясное дело).
  • Grid cells – грид-ячейки – пересечение строки и колонки.
  • Grid area – грид-область – прямоугольная область сетки, состоящая из одной или нескольких ячеек.

Основные понятия CSS Grid

ОПРЕДЕЛЕНИЕ ГРИДОВ

Для создания грид-контейнера вам нужно всего лишь задать свойство display со значением grid или inline-grid. Всё как и с флексами.
Далее определяем структуру нашей сетки. Например, для того, чтобы задать размер и количество грид-полос, нужно написать что-то вроде этого:

Таким образом мы создали сетку с двумя строками высотой по 100px и тремя колонками шириной соответственно 400, 200 и 100px. Эта сетка будет иметь четыре вертикальные линии (1, 2, 3, 4) и три горизонтальные линии (1, 2, 3). Также вы можете дать название каждой линии, чтобы потом можно было ссылаться на неё. Например:

Определение гридов
Размеры грид-полосы можно задавать разными способами:

  • Длина или процент от размера грид-контейнера.
  • Размер, зависящий от размера контента грид-полосы, используя значения auto, min-content, max-content, или fit-content.
  • Новая единица измерения fr, которая работает примерно также как flex-grow при нулевом flex-basis, т.е. делит доступное пространство в определенной пропорции.

Кроме того, размер грид-полос можно регулировать с помощью функций:

  • minmax(), для установки минимального и максимального размера грид-полосы. В этом случае её размер будет зависеть от количества свободного места и размеров других полос.
  • repeat(), для установки фиксированного количества повторений грид-полосы. К примеру: grid-template-columns: 300px 300px 300px 300px; можно задать через функцию: grid-template-columns: repeat(4, 300px);

Также доступно значение auto, которое рассчитывает количество грид-полос в зависимости от доступного свободного пространства.
Еще разрабы предусмотрели специальный наглядный синтаксис, который определяет структуру сетки с помощью старого-доброго ASCII art.

В этом примере мы создаем сетку 2х3, где первую строку полностью займет хедер, во второй слева будет сайдбар, справа – основной контент, ну и понятно, что будет в третьей.
Грид-области
Вы также можете определить интервал между грид-полосами. Для этого есть свойства grid-row-gap и grid-column-gap.

РАЗМЕЩЕНИЕ ЭЛЕМЕНТОВ

Дочерние блоки грид-контейнера называются грид-элементы. Их позиционирование определяется свойствами grid-row-start, grid-row-end, grid-column-start, и grid-column-end. Однако чаще используют короткую запись grid-row, grid-column, и grid-area.
Так,

будет идентична записи

А запись

Соответственно

Либо всё вместе еще короче

Эта запись означает, что наша область будет находиться между второй и четвертой горизонтальными грид-линиями и между 2 и 3 вертикальными грид-линиями.
Также вы можете выбрать ячейку. В таком случае цифры будут обозначать не порядковый номер грид-линии, а номер грид-полосы:

Давайте посмотрим, как это будет выглядеть на сетке. Для примера выделим еще такую область:

Span обозначает через сколько линий будет граница элемента.
Размещение элементов Grid сетки
При определении вышеперечисленных свойств, вы также можете обращаться к именованным грид-линиям и областям, что в некоторых случаях может быть очень удобно.
И, наконец, грид-элементы могут выстраиваться по сетке самостоятельно. Это происходит, если свойство не задано, либо задано ключевым словом auto. При этом элемент будет автоматически занимать пустую ячейку, при необходимости создавая новую строку или колонку (если задано свойство grid-auto-flow: column;).

ВЫРАВНИВАНИЕ

Одна из самых крутых вещей в CSS Grid Layout – это мощная поддержка выравнивания. Вы можете легко выравнивать сетку по обеим осям с помощью простых CSS свойств.
Выравнивание работает по двум направлениям: грид-полосы относительно грид-контейнера и грид-элементы относительно грид-областей.
CSS свойства justify-content и align-content применяются к грид-полосам, чтобы выравнивать их горизонтально и вертикально, соответственно. Эти свойства, предназначенные для выравнивания контента, также могут применяться и для распределения свободного места в контейнере, принимая значения between, around, evenly, и stretch.
Поиграться со свойствами выравнивания можно здесь

CSS Grid выравнивание
Выравнивание же грид-элементов осуществляется с помощью свойств justify-self и align-self для горизонтального и вертикального выравнивания, соответственно.
Css Grid выравнивание элементов

CSS GRID И ОТЗЫВЧИВАЯ ВЕРСТКА

Как вы уже догадываетесь, многообразие свойств выравнивания и размещения элементов в CSS Grid, помогает с легкостью создавать отзывчивые сетки. Вы можете использовать такие мощные механизмы задания размера грид-полос как новая единица измерения fr и функции minmax() или repeat(). В сочетании с медиа-выражениями создание отзывчивой сетки будет занимать буквально несколько строчек кода.
Например:

Отзывчивый CSS Grid

И МНОГОЕ ДРУГОЕ

Это статья своего рода вводный пост о возможностях нового модуля CSS Grid. Для более детального обзора всех его функций потребуется намного больше знаков, формул и поясняющих картинок, которые просто не уместятся в одну заметку.
С примерами, опубликованными в этой статье вы можете поиграться здесь.
Узнать больше про CSS Grid вы сможете здесь (англ.): раз, два, три.
Или здесь (рус.): раз, два.

ИТОГ

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

Перевод статьи: https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/

Следить за обновлениями блога в: твиттере, фейсбуке, вконтакте

Отставить комментарий

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