Колонки и промежутки — Примеры

Пример 1 — Замена «шириной примерно 30%» на пролёты колонок

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

Сетка товаров, окно 1280px
  Ширина карточки:  ~30% строки
  Зазор:            ~20px, дрейфует при изменении окна

Решение

12 колонок, промежуток 24px, поля 80px на этой ширине
  4 карточки занимают по 3 колонки каждая   (3 + 3 + 3 + 3 = 12)

Двенадцать колонок чисто делятся на 2, 3, 4 и 6, поэтому четыре карточки попадают на целые края без остатка. Фиксированный промежуток держит ритм между блоками стабильным, а с окном масштабируются только поля. Элемент «примерно 30%» нельзя переиспользовать на другом экране или объяснить разработчику, однако пролёт годится и для того, и для другого. Обычная ошибка — нечётное число колонок: половины и трети требуют дробей, и ничего не выравнивается.

Пример 2 — Ограничение строки восемью колонками

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

Страница статьи, окно 1440px
  Основной текст занимает все 12 колонок  ->  строки длиннее 100 символов

Решение

12 колонок, промежуток 24px, поля 80px
  Основной текст занимает 8 колонок        ->  примерно 70 символов
  Оставшиеся 4 колонки держат пустоту (или боковую панель)

Основной текст должен идти на шести-восьми колонках из набора в двенадцать, поэтому строка остаётся около 70 символов, какой бы широкой ни стала страница. Неиспользуемые колонки — причина, по которой у раскладки позже найдётся место для боковой панели, и ничего сдвигать не придётся. Расширение текста, чтобы заполнить сетку, — самый частый способ превратить удобную строку в нечитаемую, а потом свалить вину на набор колонок.