Введение в CSS Grid Layout Module

Введение в CSS Grid Layout Module

От автора: в этом вводном уроке я расскажу вам об этой относительно новой функции CSS, расскажу о текущей поддержке в браузерах и покажу вам несколько примеров того, как работает CSS Grid Layout Module.

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

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

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

Сетка также дает нам гибкий способ изменить положение элементов только с CSS без каких-либо изменений в HTML. Это можно использовать со медиа запросами для изменения макета на разных контрольных точках.

Поддержка в браузерах

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Введение в CSS Grid Layout Module

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

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

Если вы нажмете кнопку «Показать все» на Can I use, вы увидите, как далеко назад эта поддержка идет. Поскольку Grid является такой новой функцией, обратная совместимость не распространяется далеко, поэтому вам нужно помнить об этом, если ваша аудитория использует старую версию какого-то основного браузера.

Однако, если навести курсор на версию на Can I use, можно посмотреть скорость глобального использования для этой версии. На момент написания статьи последние версии всех браузеров без поддержки Grid используется гораздо меньше одного процента.

Internet Explorer … и другие не поддерживающие браузеры

Первое предложение Grid Layout было разработано Microsoft, а в IE10 вышла реализация префиксом -ms. Если вы посмотрите на поддержку на Can I use, вы увидите, что IE10 и IE11 поддерживают CSS Grid … с оговоркой, что они поддерживают только более старую версию спецификации. Облом. Это не изменится. Но что изменится, это использование этих браузеров. В июле 2018 года использование IE11 сократилось примерно до 2% в глобальном масштабе, а использование IE10 составляет примерно одну десятую процента.

Can I use также указывает, что несколько других браузеров не поддерживают grid layout. К ним относятся Opera Mini и Blackberry Browser. Opera Mini – единственный браузер, обладающий значительным использованием, но поскольку это мобильный браузер, вы, скорее всего, захотите настроить таргетинг на мобильный, а не макет grid.

Фолбеки для не поддерживающих браузеров

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

Возможно, самый простой вариант — предоставить простой mobile first макет. Это будет вполне адекватно для мобильных устройств, которые не поддерживают Grid, а также настольных браузеров, таких как IE.

Другим вариантом является использование более сложных фолбеков и переопределений для получения аналогичных результатов для Grid, как указано Рэйчел Эндрю.

И polyfill также доступен для обеспечения рабочей реализации Grid Module для браузеров, которые его не поддерживают. Обратите внимание, что это может быть немного устаревшим.

Пример Grid Layout

Начнем с примера, чтобы увидеть силу Grid Layout, а затем я объясню некоторые новые концепции более подробно. Представьте, что вы хотите создать приложение Twitter с четырьмя полноразмерными раскладками столбцов (твиты, ответы, поиск и сообщения), что-то абстрагируемое и похожее на снимок экрана ниже.

Введение в CSS Grid Layout Module

Вот наш HTML:

Затем мы применим CSS к контейнеру .app-layout:

Посмотреть демо

Вот объяснение того, что мы сделали в предыдущем CSS:

Установили свойство display в grid.

Разделили элемент контейнера на четыре столбца, каждый столбец — 1fr (одна доля) свободного пространства в контейнере сетки.

Создали одну строку и установили высоту равной 100vh (полная высота вьюпорта).

Как вы можете видеть, Grid Layout Module добавляет новое значение в свойство display — grid. Значение grid устанавливает .app-layout контейнером сетки, который также устанавливает новый контекст форматирования сетки для его содержимого. Это свойство необходимо для начала использования Grid Layout.

Свойство grid-template-columns задает ширину каждого столбца сетки внутри Grid, и в нашем случае оно делит контейнер .app-layout на четыре столбца; каждый из них равен 1fr (25%) доступного пространства.

grid-template-rows задает высоту каждой строки сетки, и в нашем примере мы создали только одну строку с высотой 100vh. Макет с двумя столбцами и двумя строками будет выглядеть так:

Введение в CSS Grid Layout Module

И мы будем использовать следующий CSS:

Посмотреть демо

Мы также можем выполнить приведенный выше пример только на небольших экранах, обернув код внутри медиа-запроса. Это открывает отличную возможность для нас настроить макет по-разному в разных вьюпортах. Например, мы можем создать предыдущий макет только для вьюпортов под 1024px следующим образом:

Посмотреть демо

Концепции Grid Layout Module

Теперь, когда вы видели простой пример, есть несколько новых концепций, которые я хотел бы осветить, чтобы вы лучше поняли Grid Layout. Хотя есть много новых концепций, я лишь взгляну на некоторые из них.

Элемент Grid

Элементы сетки — это дочерние элементы контейнера сетки. В приведенном выше примере .tweets и .replies будут элементами сетки.

Линии Grid

Введение в CSS Grid Layout Module

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

Из приведенного выше снимка экрана, который представляет первый пример, я создал четыре столбца по 1fr каждый, что даст нам пять вертикальных линий. Я также создал один ряд, который дает нам две горизонтальные линии.

Давайте посмотрим, как мы можем позиционировать элемент сетки внутри контейнера сетки.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Расположение элементов с помощью номера линии

Вы можете ссылаться на точный номер линии в сетке, используя свойства grid-column-start и grid-column-end. Затем мы даем эти свойства номерам начала и конца строки. Если посмотреть на предыдущий пример, это то, как браузер по умолчанию устанавливает элементы по умолчанию:

Рассмотрим код для столбца .tweet. Что делает каждая из трех строк в CSS:

Помещает дочерний элемент, начиная с первой вертикальной линии слева.

Завершает положение элемента во второй вертикальной линии.

Помещает элемент внутри всей строки.

Вы можете изменить это, изменив порядок элементов с разными позициями, поэтому порядок элементов будет: .search, .replies, .messages и .tweets.

Введение в CSS Grid Layout Module

И мы можем сделать это следующим образом:

Мы также можем использовать сокращенное свойство grid-column, чтобы установить начальную и конечную линии в одной строке:

Посмотреть демо

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

Расположение элементов с помощью именованных областей

Область сетки — это логическое пространство, используемое для выкладки одного или нескольких элементов сетки. Мы можем назвать область сетки явным образом с помощью свойства grid-template-areas, тогда мы можем поместить элемент сетки в определенную область, используя свойство grid-area.

Чтобы сделать эту концепцию более понятной, давайте повторим пример с четырьмя столбцами с первым столбцом search:

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

Посмотреть демо

Пример Slack

Как насчет использования Grid Layout Module для реализации более сложного примера, например, создания строительных блоков макета Slack. Поскольку мы говорим о макетах, мы будем абстрагироваться и упрощать дизайн Slack до строительных блоков, представленных в сетке. Что-то вроде этого:

Введение в CSS Grid Layout Module

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

Введение в CSS Grid Layout Module

Здесь я использую свойство grid-template-columns для создания трех столбцов в 100px, 250px, а третий столбец занимает оставшееся свободное пространство. Последняя строка создает три строки: первая и третья строки с автоматической высотой, а средняя строка занимает оставшееся свободное пространство. Остальная часть CSS выглядит так:

Посмотреть демо

Мы также можем создать макет Slack с использованием именованных областей, которые вы можете увидеть в этой демонстрации.

Grid Layout Module или Flexbox

Поскольку многие из вас начали использовать Flexbox, вы можете задаться вопросом: когда было бы целесообразно использовать Flexbox, и когда было бы более целесообразно использовать Grid Layout?

Я нашел хорошее объяснение от Tab Atkins: Flexbox подходит для многих макетов и множества элементов (компонент страницы), поскольку большинство из них принципиально линейны. Grid подходит для общего макета страницы и для сложных компонентов страниц, которые не являются линейными по своему дизайну.

Оба могут быть составлены произвольно, поэтому, как только они будут широко поддерживаться, я считаю, что большинство страниц будут состоять из внешней grid для общей компоновки, комбинации вложенных flexbox и grid для компонентов страницы и, наконец, макета block/inline/table на «концах» страницы, где располагается текст и контент.

Также Rachel Andrew поясняет: Grid Layout для основной структуры страниц строк и столбцов. Flexbox для навигации, элементы пользовательского интерфейса, все, что вы можете перевести в линейное пространство.

Заключение

Как вы видели, модуль компоновки сетки CSS является мощным из-за его краткости кода и того факта, что у вас есть возможность изменить порядок макета, не касаясь разметки. Эти функции помогли нам постоянно менять способ создания макетов для Интернета.

Автор: Ahmad Ajmi

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree