CSS Grid встречает реальный мир
Когда CSS Grid Layout впервые появился в браузерах, у нас появилась возможность улучшить существующие техники компоновки элементов задолго до того, как мы смогли рассматривать использование гридов как главный инструмент для решения подобных задач. Пожалуй, начну с простого примера, который продемонстрирует, как может пригодиться CSS Grid, а также он поможет наглядно показать, как взаимодействуют между собой гриды в реальном мире.
В этом примере мы создадим простую форму авторизации. В результате наших стараний форма должна выглядеть, как показано на картинке ниже.
Можете заглянуть на CodePen и увидите одну из трех версий этой формы в зависимости от того, каким браузером пользуетесь, и включены ли у вас Grid Layout (чтобы восхищаться гридами, заходите через Canary, если только вы не гость из будущего. А на Марсе человечество уже побывало?).
Шаг 1. Действительно старые браузеры. Ну ооочень старые.
Так как мы хотели бы, чтобы наша форма работала у всех пользователей, начнем верстку с использованием минимального количества свойств компоновки. Для центрирования бокса воспользуемся проверенным временем методом указания свойству margin автоматического выравнивания по правому и левому краю. Еще добавим для body верхний padding, просто чтобы наша форма не прилипала к верхней части страницы. Можете использовать display: table или то, что вам больше нравится для достижения похожего результата.
Добавим еще немного стилей: рамки, фон формы и полей и прочие красивости, не относящиеся к теме данной статьи. Получим нечто вроде этого:
Шаг 2. Наши гибкие друзья.
Flexbox великолепно поддерживается браузерами и дает нам отличный инструмент для вертикального и горизонтального центрирования. Нашим следующим шагом будет проверка поддержки браузером этого замечательного свойства, при помощи CSS Feature Query. Если браузер поддерживает flexbox, то мы используем display: flex на body, установим ему высоту в 100vh единиц, а после используем выравнивающие свойства align-items и justify-content, чтобы выравнять бокс.
Пришлось переопределить несколько свойств, установленных для версии без flexbox. Можно еще заморочиться и добавить больше выравниваний для элементов формы, но сделаем вид, что мы находимся на той точке эволюции, в которой все пользуются браузерами с поддержкой гридов(на самом деле просто сокращу объем кода, чтобы вам не пришлось пробираться через него к сути статьи).
Шаг 3. Взываем к grid’ам!
У нас уже есть вполне пригодная для использования форма. Но давайте добавим несколько финальных штрихов с использованием Css Grid.
И снова, как и в случае с flexbox мы воспользуемся feature query чтобы проверить поддержку grid в браузере. Внутри feature query можем смело придавать нашей форме нужный вид при помощи сетки.
@supports (display: grid) {
}Когда вы используете grid с колонками и строками, которые не вмещаются в размер контейнера сетки, вы можете использовать свойства для выравнивая элементов в контейнере, совсем как в случае с flexbox.
Свойство align-content управляет вертикальной осью сетки, выравнивая строки внутри нее. Установим align-content в значение center, и все блоки смещаются к центру контейнера сетки.
Свойство justify-content управляет горизонтальной осью, выравнивая колонки сетки. Зададим justify-content значение center, и все блоки перемещаются к центру контейнера сетки. Эти свойства являются частью модуля Box Alignment Level 3, из которого берутся все годные выравнивающие свойства flexbox и становятся доступными для компонующих свойств.
Снизу нашей формы расположен блок с ссылкой на регистрацию. Используем свойство align-self, установленное в значение end, чтобы блок прижался к низу строки.
.account {
align-self: end;
}Внутри нашей формы находятся элементы, с метками и полями. Поскольку все они вложены и не являются прямыми потомками сетки, нам необходимо создать новую сетку из div который обернет поля формы. Если когда-нибудь в CSS у нас появятся вложенные сетки, такой момент станет хорошим примером их использования, но впрочем не буду отвлекаться.
Наша вложенная сетка разбита на гибкие колонки, по три в каждой строке, и выравнивает элементы внутри себя по центру, поэтому метки аккуратно выстроены вровень с полями.
Можно было бы воспользоваться flexbox и для этого случая, такой вариант тоже имеет место. Но вот в чем ключевое отличие grid от flex — когда мы используем гриды, мы определяем размеры нашей сетки и затем помещаем в нее что-то без нарушения размеров сетки, в то время как flexbox распределяет размеры сетки основываясь на вложенном в него контенте. Устанавливая ширину элементов используя свойство flex-basis, мы можем добиться похожего поведения для наших элементов, но в идеальном мире это свойство должно было выглядеть больше похожим на гриды. Согласитесь, логичнее добавить описывающие размеры свойства контейнеру, в котором расположен элемент, а не добавлять свойства, влияющие на занимаемый элементом объем. Если провести аналогию, то grid — это различного объема ящики, у которых есть определенные габариты, а элементы — это то, что в эти ящики кладут, и это нечто может вовсе не иметь габаритов и занять весь предоставленный ему объем.
Будет прелестно, если однажды мы действительно сможем орудовать гридами в своих проектах и использовать предназначенные для верстки сетки инструменты, а не использовать те методики, которые реализуют наиболее приближенное к нужному нам поведение.
Больше информации об использованных в статье технологиях можно найти по ссылкам:
- Jen Simmons написала великолепную статью про Feature Queries
- Множество мелких примеров применения grid
- Больше информации о различиях между grid и flexbox
Оригинал статьи: CSS Grid meets the real world, автор Rachel Andrew
Благодарю мою жену, за редактирование статьи. И всех кто помогает мне с улучшением.