Grid ruler как пользоваться

Обновлено: 05.07.2024

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

Введение

CSS Grid Layout (aka "Grid") - это двумерная система компоновки основанная на сетке, цель которой заключается в том чтобы полностью изменить способ проектирования пользовательских интерфейсов основанных на сетке. CSS всегда использовался для разметки веб-страниц, но никогда не делал эту работу хорошо. Сначала мы использовали таблицы, потом обтекания (floats), позиционирование и инлайновые блоки (inline-block), но все эти методы по существу являются просто хаками и опускают много важных функциональных возможностей (например, вертикальное выравнивание). Flexbox помог, но он предназначен для более простых одномерных макетов, а не для сложных двумерных (на самом деле Flexbox и Grid очень хорошо работают вместе). CSS Grid'ы - это первый модуль созданный специально для решения проблем компоновки, которые до сих пор мы решали с помощью хаков при создании сайтов. Есть две основные вещи, которые вдохновили меня на создание этого руководства. Первое, это замечательная книга от Rachel Andrew's Get Ready for CSS Grid Layout. Это подробное и понятное введение в CSS Grid'ы, которое является основой для всей этой статьи. Я настоятельно рекомендую купить и прочитать его. Вторая вещь, которая меня вдохновила - это A Complete Guide to Flexbox (Полное руководство по Flexbox) от Chris Coyier's, которая стала моим основным ресурсом по Flexbox. Она помогла большому количеству людей, о этом свидетельствует тот факт, что это лучший результат в поисковой выдаче при запросе"Flexbox" в Google. Вы увидите много похожего между этой статьей и моей, потому что почему бы не украсть у лучших?

Моя цель в этом руководстве - это возможность представить вам концепции CSS Grid'ов так как они существуют в самой последней версии спецификации. Поэтому я не буду освещать устаревший синтаксис для IE и сделаю всё возможное, чтобы это руководство регулярно обновлялось, по мере изменения спецификации.

Основы и поддержка браузерами

Для того чтобы начать работу, нам нужно определить элемент-контейнер с помощью display: grid, настроить размеры колонок и строк с помощью grid-template-columns и grid-template-rows, а также разместить его дочерние элементы внутри сетки с помощью grid-column и grid-row. Так же как и во Flexbox, порядок элементов в источнике сетки, не имеет значения (прим. переводчика: в HTML разметке). Ваш CSS может размещать их в любом порядке, что собственно упрощает перегруппировку сетки с помощью медиа запросов. Представьте, что вы определяете разметку всей страницы, а затем полностью переставляете её, чтобы разместить элементы под другую ширину экрана всего лишь с помощью нескольких CSS строк кода. CSS Grid - это один из самых мощных CSS модулей, представленных когда-либо. По состоянию на март 2017 года, многие браузеры уже поддерживают CSS Grid, без префиксов: Chrome (включая Android), Firefox, Safari (включая iOS), и Opera. Internet Explorer 10 и 11 поддерживают его но с реализацией более старого синтаксиса. Была анонсирована поддержка в Edge, но её пока нет.

Учим CSS Grid за 5 минут

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

В этом году модуль также получил нативную поддержку основных браузеров (Safari, Chrome, Firefox), поэтому я считаю, что всем фронтенд разработчикам придется изучать эту технологию в недалеком будущем.

В этой статье я быстренько расскажу вам об основах CSS Grid.

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

Ваш первый CSS Grid макет

Двумя основными компонентами CSS Grid являются обертка(Родитель) и элементы (Дети). Обертка — это фактически сетка, а элементы — это содержимое внутри сетки.

Вот разметка для обертки с шестью элементами в ней:

Чтобы превратить нашу обертку div в сетку, мы просто дадим ей отображение grid:

Но это пока ничего не делает, поскольку мы не определили, как мы хотим, чтобы наша сетка выглядела. Сейчас это просто складывает 6 div друг на друга.

Я добавил немного стилей, но это не имеет ничего общего с CSS Grid.

Столбцы и строки

Чтобы сделать его двумерным, нам нужно определить столбцы и строки. Давайте создадим три столбца и две строки. Мы будем использовать свойства grid-template-row и grid-template-column .

Поскольку мы написали три значения для grid-template-columns , мы получим три столбца. И мы получим две строки, так как мы указали два значения для grid-template-rows .

Значения определяют широту наших столбцов (100px) и высоту для наших строк (50px). Вот результат:

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

Попытайтесь понять связь между кодом и макетом.

Вот как это выглядит:

Расположение элементов

Следующее, что вам потребуется узнать, как разместить элементы на сетке. Здесь вы получаете сверхспособности, так как создавать макеты очень просто.

Давайте создадим сетку 3x3, используя ту же разметку, что и раньше.

Это приведет к следующему макету:

Заметьте, мы видим только сетку 3x2 на странице, в то время как мы определили ее как сетку 3x3. Это потому, что у нас есть только шесть элементов, чтобы заполнить сетку. Если бы у нас было еще три, то и нижняя строка была бы заполнена.

Для позиционирования и изменения размера элементов мы будем указывать их и использовать свойства grid-column и grid-row :

Здесь мы говорим о том, что мы хотим, чтобы item1 начинался с первой линии сетки и заканчивался на четвертом столбце. Другими словами, это займет всю строку. Вот как это будет выглядеть на экране:

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

Обратите внимание, что теперь мы используем все строки в сетке. Когда мы сделали чтобы первый элемент занимал весь первый ряд, он сдвинул остальные элементы вниз.

Наконец, я хотел бы показать более простой синтаксис для примера выше:

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

Вот как это выглядит на странице. Попытайтесь понять почему это выглядит так. Это не должно быть слишком сложно.

CSS Grid понятно для всех

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

Поддержка браузерами

В 2020 году поддержка браузерами достигает 94 %

Grid контейнер

Мы создаем grid контейнер, объявляя display: grid или display: inline-grid на элементе. Как только мы это сделаем, все прямые дети этого элемента станут элементами сетки.

grid-template-rows — это CSS свойство, которое определяет названия линий и путь размера функции grid rows.

CSS свойство grid-row определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.

Свойство CSS grid-gap является сокращенным свойством для grid-row-gap и grid-column-gap , определяющего желоба между строками и столбцами сетки.

Свойство grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.

Повторение названия области приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис предоставляет визуализацию структуры сетки.

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

Создаем шаблон сайта с CSS Grid:

Изменяем шаблон

Вы можете изменить шаблон просто перераспределив грид-области в grid-template-areas .

Таким образом, если мы сменим на это:

То в результате получим такой шаблон:

Гриды с медиа запросами

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

Это делает CSS Grid идеальным для медиа запросов. Мы можем просто переназначить значения в ASCII-графике и обернуть результат в конечный медиа запрос.

В результате получим:

Таким образом, все дело состоит в переназначении значений в свойстве grid-template-areas .

Заключение

В данной статье мы рассмотрели всего лишь верхушку CSS Grid Layout айсберга. Иногда сложно поверить своим глазам какие штуки удается сделать при помощи CSS Grid. Это разрыв всех шаблонов. И мне это нравится.

Я вам советую обратить внимание на данную спецификацию и потратить немного своего времени на ее изучение. Поверьте, в будущем вам это точно пригодится и не важно, пишете вы на React, Angular, Vue (вставьте свое). Grid’ы пришли надолго.

CSS решения. Создание сетки, колонок и гридов.

В данной статье поговорим о создании сеток в HTML. Разберём сетку в Twitter Bootstrap и приведём популярные решения для трёх случаев:

old way — старый стиль, работающий во всех популярных браузерах;
new way — современный стиль, работающий во всех современных браузерах (IE > 9) (twitter bootstrap 4);
feature way — божественный стиль (будущий), работающий в прогрессивных браузерах.

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

Классические колонки с использованием float (old way)

Одна из самых популярных реализаций колонок была представлена в Twitter Bootstrap 3.

Принцип работы в следующем:

Создаём родителя (row), для которого задаём отрицательные отступы margin слева и справа. (Это необходимо, чтобы колонки располагались по центру без необходимости указывать дополнительные классы первому и последнему элементам, чтобы выровнять колонки);
Так как колонки будут располагаться с помощью плавающего свойства float, к родителю применяется утилита clearfix, которая позволит нормализовать высоту родителя и устранит нежелательные сайд эффекты;
Все дочерние элементы (.col) родителя получают положительные отступы слева и справа с помощью padding. Для позиционирования также устанавливается свойство float: left ;
Считается, что в сетке не может быть более 12 колонок, поэтому базовая ширина колонки равна 1/12, в пересчёте на проценты

Создадим следующую HTML структуру со следующими стилями:

Сначала мы объявили константы:

old-columns — количество колонок
old-gutter — расстояние между колонками

Для родителя задали отступы слева и справа, а также добавили clearfix :

Для колонок добавили отступы и базовые стили, общие для всех:

Для примера, мы используем селекторы атрибутов ([class^=’old-column-’]), но в продакшене, старайтесь их изберать.

Саму сетку создали средствами SCSS:

Которая в итоге сгенерирует набор классов с постфиксами от 1 до 12:

Откроем в браузере:

Для добавления адаптивности, необходимо добавить точки остановок (breakpoints)для нужных размеров, а также задать соответствующие суффиксы классам колонок:

Как видно, для задания размеров мы использовали коллекции (map) в SCSS и с помощью цикла обошли все размеры и сгенерировали нужные классы с нужными суффиксами. Подробнее о работе map’ов в документации SASS.

В результате получим:

На gif’ке видно, как колонки изменяются в зависимости от ширины экрана.

Полную реализацию колонок, вы можете посмотреть в исходниках Twitter Bootstrap 3 в репозитории.

Преимущества:

Недостатки:

Невозможность лаконичной реализации дополнительной возможности — одинаковая высота колонок.

Как и ранее (в предыдущей статье — CSS решения. Фиксированный блок плюс адаптивный блок) лучшим решением является использование микро скрипта, который следит за изменением ширины блоков и обновляет высоту блоков.

Колонки с использованием flex (new way)

Более прогрессивным способ для создания колонок является использование flex .

Принцип работы заключается в следующем:

Создаём родительский блок (.row) для которого указываем свойство display: flex . Так как колонки выстраиваются в линию и могут занимать больше 100%, для этого ставиться свойство flex-wrap: wrap ;
Для создания корректных отступов задаём отрицательные margin-left и margin-right ;
Для всех потомков первого уровня задаем свойства position: relative , которое гарантирует корректную обработку, width: 100% что позволит нормализовать свойства всех потомков и уравнять их права на доступную им ширину, а также отступы слева и справа с помощью padding ;
Также создаются разные классы колонок (.col-1, .col-2, …), которые принимают соответствующие размеры в пропорции 1 к 12. В отличии от предыдущего решения, регулирование ширины колонок осуществляется с помощью свойств flex и max -width .

Создадим следующую структуру HTML и классы, описанные выше:

Как можно увидеть из реализации, решение почти совпадает с old-way.

Откроем в браузере:

Так как решение уже учитывает адаптивность изменим ширину браузера и посмотрим на результат:

Ознакомиться с полным решением можно в репозитории Twitter Bootstrap.

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

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

Преимущества:

Работает во всех современных браузерах (IE > 9)
Колонки одинаковой высоты из «коробки»

Недостатки:

Fafnur/medium-stories

This project was generated using Nx. 🔎 Nx is a set of Extensible Dev Tools for Monorepos. Nx Documentation 10-minute…

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — css-grid.

Создание сеток с помощью grid (feature way)

Последним решением является создание сеток средствами W3C — использование display: grid .

Принцип работы в следующем:

Создаётся родительский блок, который будет сразу определять размеры и количество колонок. Блок получает свойство display: grid .
Для задание строк используется свойство grid-template-rows , которое принимает доступные размеры строк. Например: 1fr — создаст сетку с 1 строкой; 1fr 2fr 1fr — создаст сетку с 3 строками, где средняя строка будет занимать 50% всей доступной высоты
Для задания столбцов используется свойство grid-template-columns , которое принимает доступные размеры столбцов (аналогично grid-template-rows ).

Создадим сетку подобную тем, что приводились в примерах ранее:

Откроем в браузере:

На скриншоте видим, что отрицательных отступов нету и колонки занимают все доступное расстояние.

Так как мы использовали единицы гибкости (fr), колонки получаются одинаковой высоты.

Если изменим ширину:

Стоит отметить, что принципы создания сеток отличаются от модели сеток используемых в Twitter Bootstrap, которые приводились ранее. В данном случае блок, который объявляет сетку уже заранее знает все свои свойства, поэтому дополнительно указывать классы не нужно.

Преимущества:

Недостатки:

Не работает в старых браузерах;
Требует перестройки мышления по построению и использованию сеток.

Резюме

В данной статье рассмотрели основные решения, используемые для создания сеток.

Разобрали типовые решения, а также привели привели следующие реализации:

старый стиль, который основан на решении Twitter Bootstrap 3;
современный стиль, который основан на решении Twitter Bootstrap 4;
будущий стиль, который основан на принципах построений сеток средствами CSS display: grid .

Спасибо за внимание!

Исходники

Все исходники находятся на github, в репозитории:

Дополнение

Небольшая демонстрация работы всех трёх решений:

Ссылки

Читайте также: