Создание дизайн-системы. Часть 2. Сетка и разметка

Перевод статьи Create your design system, part 2: Grid & Layout

Система сеток позволяет структурировать контент всей страницы и отдельных компонентов. В этой статье мы рассмотрим следующее:

  1. Макет с автоматически сгенерированным количеством колонок — на CSS Grid.
  2. Одномерная разметка — на Flexbox.
  3. Двумерная разметка — на CSS Grid.
  4. Двумерная разметка с перекрыванием элементов — на CSS Grid.

Макет с автоматически сгенерированным количеством колонок

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

Вероятно, для разных размеров экрана вы захотите установить разное количество блоков в ряду, что-то вроде библиотеки CodyHouse.

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

Давайте начнем с создания миксина. Он пригодится нам также для макетов 3 и 4.

Этот миксин инициализирует grid-контейнер и устанавливает отступы между элементами.

Мы заключили код в правило @supports, чтобы исключить браузеры, которые не поддерживают CSS Grid.

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

Функция minmax позволяет установить минимальную ширину для наших элементов, а функция repeat непосредственно создает сетку.

Теперь можно использовать эти миксины:

Вот пример их работы:

See the Pen Auto-generated number of columns  — CSS Grid by Claudia (@claudiar) on CodePen.0

Этот код не будет работать в IE и более старых версиях Edge (<= 15).
Элементы галереи будут отображаться по одному в строке и занимать 100% ширины.

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

Вот как выглядит код с фоллбэком:

Свойства, определенные вне @supports применяются во всех браузерах, поэтому внутри этого правила нам пришлось добавить дополнительный стиль, чтобы переопределить их.

Теперь миксин принимает 2 аргумента: минимальную ширину элементов для браузеров, поддерживающих CSS Grid, и необязательное количество элементов в строке (по умолчанию — 3) для остальных.

Одномерная разметка

Это самый простой макет, который мы можем создать. Есть элементы, которые нужно расположить в колонках, с возможностью настройки их ширины и равного распределения пространства.

Для этого мы будем использовать Flexbox в сочетании со вспомогательными классами (col--1, col--5) для настройки ширины. Альтернативный метод с использованием CSS Grid описан в следующем разделе.

Прежде всего давайте установим переменную для расстояния между элементами сетки:

Определим класс для грид-контейнера:

Здесь мы инициализируем flex-контейнер и разрешаем дочерним элементам при необходимости переноситься на следующую строку.

Отрицательные поля нужны для балансирования паддингов, которые будут выполнять роль  отступов между колонками. Внутри контейнера не останется пустого пространства.

Колонки будут иметь класс .col:

Мы используем padding для создания отступов и background-clip для того, чтобы фон эти отступы не заполнял.

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

По умолчанию все блоки .col имеют ширину 100% (flex-basis). Мы можем использовать классы, чтобы изменить ее:

Функция round-width используется для округления значения ширины столбцов до двух знаков после запятой (это предотвращает поломку макета в IE).

Мы создаем классы от .col--1 до .col--12. Если вы используете сетку с другим количеством колонок, просто измените переменную $grid-columns.

Вот макет для двух колонок: первая занимает 9 из 12 доступных столбцов, а вторая — оставшиеся 3.

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

Вот живой пример:

See the Pen One-dimensional layout — Flexbox by Claudia (@claudiar) on CodePen.0

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

Двумерная разметка

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

С его помощью можно сделать нечто подобное:

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

Каждому элементу макета соответствуют два числа. В примере — 4 элемента и 4 пары чисел. Первое означает число столбцов, которое занимает элемент, а второе — количество строк.

То есть первый элемент в макете должен занимать 7 столбцов и 2 строки, второй и третий —  5 столбцов и 1 строку, а последний — 12 столбцов (100% ширина) и 1 строка.

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

Мы используем grid-template-columns для создания 12 столбцов одинаковой ширины.

Обратите внимание, что мы не определили grid-template-rows (или grid-auto-rows). В основном это связано с тем, что высота строк зависит от типа контента: она может быть фиксированной, или устанавливаться в процентах от вьюпорта, или просто подстраиваться под контент.

Цикл each берет каждую пару чисел, находит соответствующий дочерний элемент контейнера (селектор :nth-of-type) и размещает его в сетке (с помощью ключевого слова span).

Вот живой пример:

See the Pen Two-dimensional layout — CSS Grid by Claudia (@claudiar) on CodePen.0

Примечание: второе число в каждой паре не обязательно. Если передавать только одно число, то мы получим одномерный макет, который может стать альтернативой методу из второго раздела (Flexbox + служебные классы).

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

Двумерная разметка с перекрыванием элементов

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

Миксин gridLayout автоматически размещает элементы в сетке без перекрытия. То есть что-то подобное сделать не получится:

Поэтому создадим новый миксин Мы можем создать новый миксин gridAdvanced:

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

В примере выше у нас 3 элемента:

  • первый занимает 7 столбцов (от 1 до 8) и 2 ряда (от 1 до 3). Помните, что восьмой столбец и третий ряд не входят в расчеты.
  • второй занимает те же столбцы и строки с 3 по 5;
  • третий начинается в 5 столбце и занимает все остальные, а также строки со второй по четвертую.

Вот сам миксин:

Он очень похож на gridLayout, но также использует grid-column|row-start|end, чтобы указать положение элементов.

Работает это так:

See the Pen Two-dimensional layout with overlap — CSS Grid by Claudia (@claudiar) on CodePen.0

Резервный вариант миксина не сможет обеспечить эффект перекрытия и возможность настройки высоты.

Вот и все, что касается настройки системы сетки.

Оставить комментарий

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