CSS Grid Layout : начало работы , руководство и подборка ресурсов

Доброго времени суток! Сегодня рассмотрим один из самых обсуждаемых инструментов современных верстальщиков  — CSS Grid Layout, который получил поддержку таких браузеров как Firefox, Chrome, Opera и Safari.

Что же такое CSS grid, на что этот инструмент способен и готов ли он к масштабному использованию?

Что такое CSS Grid Layout?

История данного инструмента начинается с 2011 года, когда компания Microsoft от правила предложение группе разработчиков CSS. Данный инструмент отвечает за позиционирование элементов на веб странице. Учитывает горизонтальное и вертикальное пространство одновременно, что уменьшает количество HTML разметки и уменьшает необходимость в медиа запросах.

Поддержка современных браузеров

CSS-гриды уже есть в Safari 10.1, Firefox 52, Opera 44 и Chrome 57.

Поддержка CSS grid современными браузерами

Сравним Flexbox и CSS Grid

Главным отличием является то, что при использовании Flexbox вам приходится выбирать менжду Х осью и Y . Проще говоря вы имеете возможность выстраивать либо только колонки либо только  столбцы. Но самое интересное что оба инструмента не конкурируют между собой и их можно использовать одновременно.

Наглядный пример разниц между Flexbox и CSS GRID

разница между flexbox и CSS grid

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

Начало работы

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

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

Grid lines — это горизонтальные и вертикальные разделители grid контейнера. Эти линии находятся по обе стороны от столбца или строки. Автор может задать для данного элемента имя или числовой индекс, которые может использовать дальше в стилях. Нумерация начинается с единицы. Важный нюанс, данный элемент восприимчив к режиму написания, который используется на вашем ресурсе. Например, вы используете Арабский язык или любой другой язык у которого режим написания справа налево, то нумерация линий будет начинаться с правой стороны.

Grid track — это пространство между двумя смежными grid линиями, вертикальными или горизонтальными.

Grid cell — это наименьшая неделимая единица grid контейнера на которую можно ссылаться при позиционировании grid элементов. Образуется на пересечении grid строки и grid колонки.

Grid area — это пространство внутри grid контейнера, в которое может быть помещен один или больше grid элементов. Этот элемент может состоять из одной или более grid ячеек.

Создадим контейнер с двумя дочерними элементами:

В стилях пропишем следующее :

На данном этапе ничего не происходит, все потому что мы не задали параментры нашим полонкам. К примеру мы хотим что бы обе колонки были по 250px в ширину и у них был черный фон:

Мы изменили и цвет текста на белый, что бы видеть его на черном фоне , на выходе получаем следующий результат:

Как на счет отступов между колонками?  Все очень даже здорово, мы передаем один параметр в родительский контейнер и наши отступы готовы, никаких margin и padding, используем grid-gap:

Как видите, между нашими полонками появился отступ в 10px. Мы еще не влияли на высоту наших колонок, по этому она ровна высоте текста. Давайте это исправим:

Как видите, для дочерних элементов мы используем flexbox для выравнивания текста по центру как вертикально так и горизонтально. Никаких конфликтов.

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

Полезные ресурсы

Подробное руководство по использованию CCS Grid Layout (англ)

Практическое использование CSS Grid , использование в существующем проекте 

Ну и наиболее полезная ссылка, шпаргалка по CSS Grid

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

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