За последние несколько лет популярность CSS-грид-систем значительно возросла, и они быстро стали считаться лучшей практикой для быстрого создания макетов. В результате не было недостатка в появлении фреймворков, предлагающих свои собственные грид-системы, пытающиеся завоевать популярность.
Если вы любопытный тип, такой как я, чем вы, возможно, спрашиваете себя, что именно системы сетки приносят на стол? Как они работают? И как вы могли бы создать свой собственный? Это лишь некоторые из вопросов, на которые я попытаюсь ответить, когда я исследую различные концепции в процессе игры, собирая вместе базовую сеточную систему с нуля.
Что такое грид-система?
Если вы новичок в сеточных системах CSS, мы начнем с быстрого определения. В общих чертах, сеточная система — это структура, которая позволяет объединять содержимое вертикально и горизонтально согласованным и легко управляемым способом. Кроме того, код системы сетки не зависит от проекта, что обеспечивает высокую степень переносимости, что позволяет использовать его в новых проектах.
Выгоды
- Они повышают производительность , предоставляя простые и предсказуемые компоновки для HTML-дизайна. Структура страницы может быть сформулирована быстро, не задумываясь о ее точности или кросс-браузерной совместимости.
- Они универсальны в том, как могут быть построены макеты, адаптируясь к различным комбинациям строк и столбцов. Они даже поддерживают вложенные сетки для более сложных случаев использования. Независимо от ваших требований к макету, сеточная система почти наверняка подходит.
- Они идеально подходят для адаптивных макетов . Это где системы сетки господствуют. Они позволяют невероятно легко создавать мобильные дружественные интерфейсы, которые можно адаптировать к различным размерам области просмотра.
Основные компоненты
Грид-системы включают два ключевых компонента: строки и столбцы . Ряды используются для размещения колонн. Столбцы составляют окончательную структуру и содержат фактическое содержание. Некоторые сеточные системы дополнительно включают контейнеры , которые служат обертками для макета.
Сброс Боксовой Модели
Прежде всего, для любой системы сетки важно сбросить блочную модель. По умолчанию браузер не включает отступы и границы в пределах заявленной ширины и высоты элемента. Это не сулит ничего хорошего для отзывчивости. К счастью, это можно исправить, установив box-sizing свойства box-sizing значение border-box как для строк, так и для столбцов:
.row, .column { box-sizing: border-box; }
Теперь мы можем использовать проценты для ширины столбцов. Это позволяет масштабировать столбцы вверх и вниз в разных окнах просмотра, сохраняя структуру.
Очистка поплавков
Чтобы выровнять столбцы по горизонтали, системы сетки будут перемещать столбцы. Это означает, что вам нужно очистить плавающие элементы в строке, чтобы сохранить структуру макета. Вот где приходит ясность :
.row:before, .row:after { content: " "; display: table; } .row:after { clear: both; }тем.row:before, .row:after { content: " "; display: table; } .row:after { clear: both; }
Применяя clearfix к строке в CSS, она будет растягиваться, чтобы вместить содержащиеся в ней столбцы без добавления в разметку.
Определение столбцов
Для столбцов стили должны быть определены в 2 частях: общие стили и ширины. Сначала общее:
.column { position: relative; float: left; }
Здесь столбцу присваивается относительная позиция, чтобы можно было позиционировать любой абсолютно позиционный контент внутри столбца относительно этого столбца. Затем столбец перемещается влево для выравнивания по горизонтали, в результате чего элемент становится display: block даже если он не начинался таким образом.
Создание желобов
Желоба помогают создать разделение между колоннами для большей разборчивости и эстетики. Есть две школы мысли при приближении к желобам; определение отступов в каждом столбце или использование левого поля в процентах для каждого столбца.
Я предпочитаю последний подход, потому что он облегчает адаптивные желоба, которые останутся относительно столбцов и области просмотра в целом с различными размерами экрана. Это также позволяет вам определять дополнительные отступы для столбцов для дополнительной гибкости. Самое большое преимущество основанных на заполнении желобов заключается в том, что они упрощают вычисления для ширины столбцов, что станет очевидным в следующем разделе.
Используя основанный на проценте маржинальный подход, мы можем нацелить столбцы, которые являются соседним братом к предыдущему столбцу. Это создаст левое поле для каждого столбца, кроме первого, который мы определим на уровне 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)
Когда мы подключаем числа, мы получаем ширину одного столбца 6,86666666667%. Отсюда мы можем использовать это число для вычисления остальной ширины столбца. Формула для этого:
cw = (scw * cs) + (m * (cs — 1))
Где:
- cw = ширина столбца
- scw = ширина одного столбца (6,86666666667%)
- cs = диапазон столбцов (1-12)
- m = маржа (1,6%)
Применение этой формулы для каждого из 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; } }
Здесь мы говорим сетке, чтобы каждый столбец занимал всю ширину своего контейнера для устройств с шириной области просмотра менее 550 пикселей в ширину. Поскольку желоба здесь больше не нужны, мы их тоже удаляем.
В качестве альтернативы, вы можете выбрать мобильную первую стратегию, которая использует противоположный подход, увеличивая масштаб до макета с 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 ниже, чтобы увидеть всю систему грид в действии, включая вложенные сетки:
Вы также можете попробовать полноэкранное демо для лучшего впечатления. Не забудьте поэкспериментировать с размерами экрана, чтобы увидеть, как сетка обрабатывает различные области просмотра.
Вывод
Как видите, собрать основную сеточную систему не нужно много. Математика, наверное, самая сложная часть. Несмотря на свою простоту, сетка продолжает оставаться мощным и гибким инструментом для компоновки строительных лесов. С различными концепциями, которые я обсуждал здесь, надеюсь, вы лучше поймете, как работают сеточные системы. Это должно помочь вам оценить различные грид-системы, движущиеся вперед, и выбрать правильную для вашего следующего проекта, или даже создать свою собственную.