Главная » Статьи » CSS Grid — обязательный инструмент для современной верстки

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

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

От автора: привет, друзья! В данной статье поговорим про последнее глобальное новшество в верстке — CSS Grid Layout. Оно обладает действительно фантастическими возможностями и позволяет делать то, что раньше в таблице каскадных стилей сделать было просто невозможно. Давайте сегодня разберем, что такое CSS Grid, рассмотрим его основные преимущества и функционал.

Основная информация

Grid Layout — это новая модель макета, которая обладает мощными способностями контролировать размеры и расположение блоков, а также их содержимого. Она представляет собой набор горизонтальных и вертикальных линий, которые образуют сетку, состоящую из рядов и колонок. Ниже показан пример 4х3.

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

Источник: quackit.com

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

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

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

Пример макета на Flex. Изображение с сайта w3.org

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

Пример макета на Flex. Изображение с сайта w3.org

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

Основы применения

По мере того, как веб-сайты развивались и превращались из простых документов в сложные интерактивные приложения, используемые методы верстки, такие как, например, float, не всегда хорошо работали. Чтобы добиться необходимых результатов, разработчикам приходилось комбинировать табличную верстку, JavaScript и float.

Полученная таким образом верстка обычно очень плохо поддавалась адаптации. Поэтому, довольно часто, сайты оставались фиксированной ширины.

Возможности CSS Grid решают эти проблемы. Технология основана на разделении пространства для макета на столбцы и строки, а также на использовании предсказуемого поведения размеров. Она позволяет точно позиционировать и масштабировать блоки контента в областях сетки, получаемых при пересечении этих столбцов и строк. Таким образом, получаем очень гибкое поведение верстки при адаптации.

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

CSS Grid — более интуитивная технология, чем любая другая техника верстки с помощью таблицы каскадных стилей, и она полностью отличается от своих предшественников. Разработка с ее помощью требует практического освоения многих новых свойств, которые не только описывают один аспект внешнего вида или поведения, но и вводят совершенно новую систему макетов. Она включает в себя около 18 свойств, которые используют техники и синтаксис, до этого момента не встречающиеся в спецификации.

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

Технология, на сегодняшний день, имеет достаточно хорошую поддержку браузерами, поэтому можно применять данную технологию.

Возможности

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

фиксированные и гибкие размеры полос. Вы можете создать сетку с фиксированными размерами полос — например, используя пиксели. Вы также можете создать сетку с гибкими размерами, используя проценты или новую единицу измерения — fr, предназначенную для этой цели;

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

создание дополнительных полос для хранения контента. Вы можете определить явную сетку с макетом, но спецификация также касается контента, размещенного за пределами объявленной области. При необходимости, добавляются дополнительные строки и столбцы. Включены такие функции, как возможность добавить «столько столбцов, сколько будет помещено в контейнер»;

управление выравниванием. Эти функции позволяют контролировать, как элементы выравниваются после размещения в области сетки, и как выравнивается весь Grid;

управление перекрывающимся контентом. В ячейку сетки может быть помещено более одного элемента, или области могут частично перекрывать друг друга. Затем это расслоение можно контролировать с помощью z-index.

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

CSS Grid — это мощная новая технология в верстке. Она позволяет создавать динамические, отзывчивые, современные макеты на чистом CSS. При этом, код чище и проще в поддержке, по сравнению с традиционными методами верстки.

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

При написании статьи использовались материалы: