Типовые решения в вёрстке. Простой рецепт колоночной раскладки

Типовые решения в вёрстке

Сегодня рассмотрим простой способ разбиения страницы на колонки. Для этого используем флексбокс.

Допустим, нам нужны четыре колонки, занимающие всё свободное место, с межколонниками по 20 пикселей.

Набросаем каркас разметки для четырёх колонок:

<div class="cols">
  <div class="col">
    <!-- колонка №1 -->
  </div>
  <div class="col">
    <!-- колонка №2 -->
  </div>
  <div class="col">
    <!-- колонка №3 -->
  </div>
  <div class="col">
    <!-- колонка №4 -->
  </div>
</div>

Чтобы добиться ширины межколонника в 20 пикселей, нужно добавить каждой колонке отступы слева и справа, равные половине межколонника:

20px / 2 = 10px

Если вы когда‑нибудь пользовались Бутстрапом, то такой способ может быть вам знаком.

Бутстрап — фреймворк для фронтенд‑разработчиков, с помощью которого можно быстро собирать страницы, используя готовые цсс‑правила и модули. В Бутстрапе по умолчанию используется двенадцать колонок.

Официальный сайт

Добавим основные стили обёртке .cols и зададим отступы у колонок. Из‑за боковых отступов края первой и последней колонок не совпадают с краями своего контейнера‑обёртки. Устраним этот ненужный эффект отрицательными отступами обёртки:

Если вы когда‑нибудь пользовались Бутстрапом, то такой способ может быть вам знаком.

Официальный сайт

.cols {
  display: flex;
  flex-flow: row nowrap;
  margin: 0 -10px;
}

.col {
  flex-basis: 25%;
  margin: 0 10px;
}

Результат:

Углефикация переоткладывает фирновый субэкваториальный климат, отмечает Г. Алмонд. Иольдиевая глина пододвигается под первоначальный спектральный класс. Формация отражает коммунизм. Кампос‑серрадос доступна.

Капиталистическое мировое общество заряжает мощный кристаллический фундамент, а Хайош‑Байа славится красными винами. Пустыня, формируя аномальные геохимические ряды, вызывает тоталитарный тип политической культуры.

Глобализация доказывает культурный ландшафт. Референдум, на первый взгляд, ищет экваториальный электрон.

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

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

Есть нюанс. Ширина двойной колонки не просто 25% + 25%. Нам нужно учесть межколонник в 20 пикселей между колонками:

25% + 20px + 25% = 50% + 20px

Аналогично рассчитывается ширина тройной колонки:

25% + 20px + 25% + 20px + 25% = 75% + 40px

Добавим модификаторы:

.col {
  margin: 0 10px;
}

.col-1 {
  flex-basis: 25%;
}

.col-2 {
  flex-basis: calc(50% + 20px);
}

.col-3 {
  flex-basis: calc(75% + 40px);
}

.col-4 {
  flex-basis: 100%;
}

И обновим разметку:

<div class="cols">
  <div class="col col-1">1</div>
  <div class="col col-1">1</div>
  <div class="col col-1">1</div>
  <div class="col col-1">1</div>
</div>

<div class="cols">
  <div class="col col-2">2</div>
  <div class="col col-2">2</div>
</div>

<div class="cols">
  <div class="col col-3">3</div>
  <div class="col col-1">1</div>
</div>

<div class="cols">
  <div class="col col-4">4</div>
</div>

Результат:

Пример на Кодпене

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

Что ещё почитать

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.