CSS Grid: общая информация

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

Что это за зверь такой и для чего он был создан? Нельзя использовать инструмент просто так (хочется там или какой-то тип с какого-то канала в телеге так говорит), нужно понимать, зачем это делать. Поэтому, прежде чем погрузиться в удивительный мир CSS Grid, давайте поговорим о сеточном макете.

Сеточный макет

Довольно часто можно встретить примеры заимствований из других сфер жизни разных решений, которые удачно вписываются в программирование. Я уже рассказывал об этих примерах, например, в статье об ООП. Верстка сайтов не стала исключением.

Само слово "верстка" применима не только к сайтам. Самый очевидный пример - типография. Вспомните все газеты, журналы, которые вы читали или читаете (кто-то до сих пор читает газеты?). Информация размещена блоками или столбиками, иллюстрации гармонично вписываются в текст, все выглядит аккуратно (ну или вырвиглазно, если это такой стиль - нормальный вырвиглазный контент тоже нужно уметь делать).

Самый популярный шаблон для верстки стал сеточный. Он позволяет выравнивать элементы относительно друг друга в горизонтальном и вертикальном направлениях. Потому его еще называют "двумерным макетом".

Возвращаясь к нашим бар... сайтам, можно сказать о сеточном макете следующие вещи:

1. Он обеспечивает построение структуры и организации страницы, которые помогают создать предсказуемый ритм и интуитивное знакомство с дизайном.
2. Он чрезвычайно дружелюбен к пользователю. Сеточный макет усиливает тенденцию чтения слева-направо, исключая сюрпризы. Также многие шаблоны легко изменяются в соответствии с устройством, которым пользуется посетитель сайта.

Раз сеточный макет позаимствован из типографии, неудивительно, что он активно применяется на сайтах газет и журналов. Такие сайты используют сетки по необходимости: необходимо эффективно организовать и управлять большим количеством информации. Сайт The New York Times - хороший пример верстки на основе сеточного шаблона.

Однако, сеточный макет может применяться не только к типографским штукам. Например, сетки можно использовать для создания плиточного дизайна:

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

Можно даже поизвращаться и запилить что-нибудь по такой схеме:

Все это возможно благодаря шикарному инструменту под названием CSS Grid.

Что такое CSS Grid?

Grid модуль в CSS был разработан CSS Working Group для того, чтобы предоставить наилучший способ создания шаблонов в CSS. Он попал в Candidate Recommendation в феврале 2017 года, а основные браузеры начали его поддержку в марте 2017 года.

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

Появление CSS Grid закономерно. Я не спроста начал цикл статей по верстке издалека - для понимания необходимости инструмента нужно знать историю развития сферы и какие проблемы возникали и решались по ходу дела. Лет 10 - 15 назад веб сайты были примитивны и верстались на таблицах или флоатах (float), но с увеличением размеров контента, появлением сложных динамических компонентов, да и просто с возникновением необходимости выделиться среди конкурентов верстка становилась гораздо сложнее, и легко справиться с задачами с помощью имеющихся способов было нереально, отчего приходилось применять различные хаки и ухищрения.

Flexbox решили проблему легкого позиционирования и выравнивания элементов в одномерном пространстве, в чем мы уже убедились. Пришла пора разобрать инструмент для двумерного пространства - CSS Grid.

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

Самое интересное, что до появления нативных (родных) CSS Grid, умельцы, понимая необходимость подобного инструмента, создавали целые CSS библиотеки. Например, 960gs, smartgrid. Кто-то вообще не стал париться и запилил гриды на Flexbox - flexboxgrid (ну а чё бы и нет). С появлением нативного модуля надобность в этих библиотеках отпала, но в свое время они реально дали толчок в развитии CSS (думается мне, именно из-за них решили таки запилить родной модуль).

Итого

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