Понимание CSS сеток с нуля

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

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

Что такое система сеток?

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

Чем полезны системы сеток?

  • Они повышают производительность, обеспечивая простой и предсказуемый макет для дизайна HTML. Структура страницы может быть быстро сформулирована без проверки на точность верстки или кросс-браузерную совместимость.
  • Они универсальны так, как макеты могут быть построены той или иной комбинацией строк и столбцов. Они также поддерживают вложенные сетки для более сложных случаев использования. Независимо от ваших требований разметки, система сеток всегда вам подойдет.
  • Они идеально подходят для адаптивного дизайна. Это там где системы сеток царствуют. Они делают невероятно легким создание мобильных дружественных интерфейсов, которые могут быть адаптированы к различным размерам экрана.

Первичные компоненты

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

Сброс отступов

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

.row, 
.column {
box-sizing: border-box;
}

Теперь мы можем использовать проценты для ширины столбцов. Это позволяет масштабировать столбцы вверх и вниз в различных разрешениях при сохранении структуры.

Очистка Floats

Для того, чтобы выровнять столбцы по горизонтали, системы сеток будут использовать float для столбцов. Это означает, что вам нужно, очистить плавающие элементы в строке, чтобы сохранить структуру макета. Вот тут то и приходит clearfix :

.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}

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

Позиционирование столбцов

Для столбцов, стили должны быть определены в 2-х частях: общие стили и ширина. Сначала общие стили:

.column {
position: relative;
float: left;
}

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

Создание желобов

Желоба помогают создать разделение между колонками для лучшего понимания и эстетики. Существует 2 способа приближения желобов; определение свойства padding для каждой колонки или с использованием процентов в left margin для каждого столбца.

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

Использование процентов в margin, поможет задавать столбцы, которые являются смежными к предыдущей колонке. Это создаст левое поле для каждого столбца, за исключением первого, который мы определим 1,6% , используя margin-left:

.column + .column {
margin-left: 1.6%;
}

Расчет ширины столбца

Прежде чем мы сможем начать делать расчеты, необходимо определить максимальное количество столбцов в строке. Лучше всего выбирать 12, так как это очень гибко, учитывая, что 12 делится на 1, 2, 3, 4 и 6. Это допускает множество различных комбинаций, которые по-прежнему позволяют равномерно распределять колонки одного и того же размера.

Важно понимать, что, беря 12 столбцов в строке, необходимо выполнить эту сумму для каждой строки независимо от того, сколько столбцов вы хотите. Например, если вы хотите ряд из 3 одинаковых столбцов, вы должны использовать 3 элемента, для которого каждый пролет будет иметь 4 колонки (4 × 3 = 12). Превышение суммы 12 приведет к дополнительной колонке (ам) упаковки на новой линии.

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

scw = (100 — (m * (mc — 1))) / mc

Где:

  • scw = ширины одного столбца
  • m = margin (1.6%)
  • mc = количество столбцов (12)

Когда мы посчитаем в числах, мы получаем одну ширину столбца 6.86666666667%. Отсюда мы можем использовать это число, чтобы вычислить остальную часть ширины столбцов. Формула для этого:

cw = (scw * cs) + (m * (cs — 1))

Где:

  • cw = ширина колонки
  • scw = ширина одного столбца (+6,86666666667%)
  • cs = расстояние между столбцами (1–12)
  • m = margin (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;
}
}

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

В качестве альтернативы, вы можете использовать стратегию mobile first , которая принимает другой подход, масштабирование вверх к компоновке 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 ниже, чтобы увидеть всю систему сеток в действии, в том числе вложенных сеток:

Смотрите CodePen Понимание CSS сеток

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

Заключение

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