Освоение модульных (grid) систем CSS с нуля
За последние несколько лет модульные системы CSS завоевывают все большую популярность, активно превращаясь в оптимальный вариант быстрого создания макета. В результате сегодня нет недостатка в программных средах, которые предлагают свои собственные модульные системы и пытаются завоевать признание. Если вы любопытны, вы наверняка уже спрашивали себя, что именно дают модульные системы? Как они работают? И как можно создать свою собственную систему? Это только часть вопросов, ответы на которые будут даны в этой статье, которая рассматривает различные концепции в действии, пытаясь освоить модульные системы с нуля.
Что такое модульная система?
Если вы только начали знакомство с модульными системами CSS, мы начнем с краткого определения. Простыми словами, модульная система это конструкция, которая позволяет размещать контент как вертикально, так и горизонтально, и делать это логичным и простым образом. Кроме того, код модульной системы не зависит от проекта, что дает ему высокую степень портативности, благодаря чему его можно использовать в новых проектах.
Преимущества
- Они повышают эффективность, обеспечивая создание простого и предсказуемого макета для HTML-дизайна. Структуру страницы можно быстро сформулировать, не перепроверяя ее точность и кросс-браузерную совместимость.
- Они гибкие с точки зрения построения макета, который можно адаптировать под различные сочетания строк и столбцов. Они даже поддерживают вложенные сетки для более сложных случаев. Вне зависимости от требований макета, модульная система практически всегда подходит идеально.
- Они идеально подходят для отзывчивых макетов. В этом модульные системы занимают лидирующую позицию. Благодаря ним создавать мобильные интерфейсы, адаптирующиеся под различные размеры окна, стало удивительно просто.
- Они гибкие с точки зрения построения макета, который можно адаптировать под различные сочетания строк и столбцов. Они даже поддерживают вложенные сетки для более сложных случаев. Вне зависимости от требований макета, модульная система практически всегда подходит идеально.
Основные компоненты
Модульные системы включают два основных компонента: строки и столбцы. Строки используются для размещения столбцов. Столбцы создают окончательную структуру и непосредственно содержат контент. Некоторые модульные системы могут дополнительно включать контейнеры, которые выступают в качестве оболочки макета.
Перенастройка блочной модели
В первую очередь для модульной системы необходимо заново настроить блочную модель. По умолчанию браузер не включает отступ и рамку в заявленную ширину и высоту элемента. Это не очень хорошо сказывается на отзывчивости. К счастью, это можно исправить, задав свойство box-sizing в border-box как для строк, так и для столбцов:
.row, .column { box-sizing: border-box;}Теперь можно изменять процентное соотношение ширины столбцов. Это позволяет столбцам увеличиваться и уменьшаться в пределах различных окон, при этом сохраняя структуру.
Очищение поплавков
Чтобы выровнять столбцы горизонтально, модульные системы создают поплавки столбцов. Это означает, что нужно очистить плавающие элементы строки, чтобы сохранить структуру макета. Здесь используется clearfix:
.row:before,.row:after { content: \" \"; display: table;} .row:after { clear: both;}Применение clearfix к строке в CSS может привести к тому, что строка будет растягиваться, размещая столбцы, которые в ней содержатся, не добавляя пометки.
Определение столбцов
Что касается столбцов, необходимо определить стили в 2 частях: общий стиль и ширину. Первым идет общий стиль:
.column { position: relative; float: left;}Здесь столбцу придается относительное положение, что позволяет абсолютно позиционированному контенту внутри столбца позиционироваться относительно этого столбца. После этого столбец перемещается влево по горизонтали, что приводит к тому, что элемент приобретает значение display: block, даже если изначально его не было.
Создание промежутка
Промежутки позволяют создать разделение между столбцами для лучшей удобочитаемости и эстетичности. Существует 2 подхода к созданию промежутков: определение внутренних полей в пределах каждого столбца или использование процентного левого отступа для каждого столбца.
Последний подход лучше, так как он позволяет создавать отзывчивые отступы, которые сохраняются относительно столбцов и окон как единое целое при различных размерах экрана. Это также позволяет определить дополнительные внутренние отступы для столбцов для дальнейшей гибкости. Самое важное преимущество промежутков на основе внутренних полей это то, как они упрощают расчет ширины столбцов, что более подробно описано в следующем разделе.
Использование подхода с процентным отступом, мы можем захватывать столбцы, которые примыкают к предыдущему столбцу. Это позволяет задать левый отступ для каждого столбца за исключением первого, которому мы зададим значение 1,6% с помощью свойства margin-left:
.column + .column { margin-left: 1.6%;}Расчет ширины столбцов
Прежде чем мы сможем начать расчеты, нам нужно определить максимальное количество столбцов на строку. Наиболее распространенный вариант это 12, так как он отличается гибкостью за счет того, что его можно разделить на 1, 2, 3, 4 и 6. Это допускает большое количество различных комбинаций, которые позволяют создавать равномерно распределяемые столбцы одинакового размера.
Важно понимать, что используя максимум 12 столбцов на строку, вам нужно заполнить это количество для каждой строки, вне зависимости от того, сколько столбцов вам нужно. Например, если вы хотели всего одну строку с 3 одинаковыми столбцами, вам нужно использовать 3 элемента, каждый из которых будет растягиваться на 4 столбца (4×3=12). Превышение количества в 12 столбцов может привести к созданию дополнительных столбцов, которые могут сползти на следующую строку.
Теперь, когда мы знаем максимальное количество столбцов, нам нужно определить ширину каждого (1/12) столбца с помощью следующей формулы:
scw = (100 (m * (mc 1))) / mc
Где:
- scw = ширина одного столбца;
- m = отступ (1,6%);
- mc = максимальное количество столбцов (12).
- m = отступ (1,6%);
Введя числа, мы получаем ширину одного столбца равную 6,86666666667%. Это число мы можем использовать для расчета ширины остальных столбцов. Формула такая:
cw = (scw \ cs) + (m \ (cs 1))
Где:
- cw = ширина столбца;
- scw = ширина одного столбца (6.86666666667%);
- cs = сколько столбцов захватывается (1-12);
- m = отступ (1,6%).
- scw = ширина одного столбца (6.86666666667%);
Применяя эту формулу для каждого из 12 столбцов, мы получим следующий результат CSS.
.column-1 { width: 6.86666666667%;}.column-2 { width: 15.3333333333%;}.column-3 { width: 23.8%;}.column-4 { width: 32.2666666667%;}.column-5 { width: 40.7333333333%;}.column-6 { width: 49.2%;}.column-7 { width: 57.6666666667%;}.column-8 { width: 66.1333333333%;}.column-9 { width: 74.6%;}.column-10 { width: 83.0666666667%;}.column-11 { width: 91.5333333333%;}.column-12 { width: 100%;}Оптимизация под мобильные устройства
Несмотря на тот факт, что модульные системы являются отзывчивыми, они могут только это. Для устройств с маленькими экранами, такими как смартфоны, ширина столбцов должны настраиваться, позволяя содержащемуся в них контенту оставаться удобочитаемым и визуально привлекательным. В этом нам помогут медиа-запросы:
@media only screen and (max-width: 550px) { .column-1, .column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9, .column-10, .column-11, .column-12 { width: auto; float: none; } .column + .column { margin-left: 0; }}Здесь мы сообщаем сетке позволить каждому столбцу принимать полную ширину его контейнера для устройств с размером экрана менее 550px в ширину. Так как отступы более не нужны, их мы тоже удаляем.
С другой стороны, вы можете выбрать стратегию с использованием преимуществ мобильных устройств, которая использует обратный подход, увеличивая макет до 12 столбцов. В таком случае, изначально столбцы отображаются в полную ширину, а потом мы задаем ширину столбцов и поплавки, позволяющие им выстраиваться по горизонтали, как только разрешение экрана достигает указанного порогового значения. Это предпочтительный подход для модульной системы Bootstrap, которая не указывает ширину столбцов, пока ширина экрана не достигнет 992 пикселей. Такой подход может оказаться более удобным для вашего случая, и в любом случае должен рассматриваться, если вы выбираете модульную систему.
Собираем все вместе
Скомбинировав все концепции и CSS, можно написать HTML-макет такого вида:
<div class=\"row\"> <div class=\"column column-4\"></div> <div class=\"column column-4\"></div> <div class=\"column column-4\"></div></div> <div class=\"row\"> <div class=\"column column-2\"></div> <div class=\"column column-4\"></div> <div class=\"column column-4\"></div> <div class=\"column column-2\"></div></div>Посмотрите на демо-версию CodePen ниже, чтобы увидеть всю модульную систему в действии, включая вложенные сетки. Также можно воспользоваться полноэкранной демо-версией для более полного понимания. Не забудьте поиграться с размерами экрана, чтобы увидеть, как сетка изменяется под различные окна.
Заключение
Как вы видите, собрать базовую модульную систему нетрудно. Математика это, наверное, самая сложная часть. Несмотря на ее простоту, модульная система остается мощным и гибким инструментом для создания макета. Мы надеемся, что описанные здесь различные концепции помогли вам понять, как работают модульные системы в целом. Это должно помочь вам оценить различные модульные системы и пойти дальше, выбрав оптимальную схему для вашего нового проекта, или даже создать свою собственную.