Школа
Веб-разработка

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

11 июня 2020
👁 10367   🗩2
Веб-разработка

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

11 июня 2020
👁 10367   🗩2
Юрий Мазурский
Разработчик и дизайнер
Полезно
 9
9
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

Допустим, нам нужны четыре колонки, занимающие всё свободное место, с межколонниками по 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>

Результат:

1
1
1
1
2
2
3
1
4

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

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

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

Веб‑разработка
Полезно
 9
9
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Алексей Комаров

Если не требуется поддерживать ИЕ, то стоит посмотреть на ЦСС‑сетку, в которой подобное реализуется проще:

.cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  margin-bottom: 20px;
}

.col {
  min-height: 80px;
  background-color: #71bbfd;
  min-width: 0;
}

.col-1 {}

.col-2 {
  grid-column: span 2;
}

.col-3 {
  grid-column: span 3;
}

.col-4 {
  grid-column: span 4;
}

Браузер сам рассчитывает размеры колонок, исходя из их количества и заданного расстояния между ними.

Алексей, нативный CSS Grid поддерживается, начиная с ИЕ 10, но с префиксом ms-grid и в старом синтаксисе:

  1. Нет gap. Чтобы имитировать отступы gaps, надо добавлять дополнительные колонки и строки в сетку.

  2. Нет repeat, но это легко преодолевается через использование :nth-child и т. п. с выражением в скобках (ax + b).

  3. Нет автоматической расстановки auto-placement. В рамках CSS этого не преодолеть, нужно добавлять полифил через JavaScript.

Первые две особенности спокойно можно автоматизировать каким‑нибудь плагином при сборке проекта, всё просто. Какой плагин — я не знаю.

ИЕ 10 ещё поддерживает flex в старом синтаксисе через префикс ms-flex.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы