x
 
Юрий Мазурский
11 июня 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Рецепты колоночных раскладок


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

Допу­стим, нам нужны четыре колонки, зани­ма­ю­щие всё сво­бод­ное место, с меж­ко­лон­ни­ками по 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Алексей Комаров
12 июня 2020

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

css .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; }
Кодпен: https://codepen.io/alex7kom/pen/GRoZPmB

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

Камиль Миндубаев
13 июня 2020

Алексей, нативный CSS Grid поддерживается, начиная с ИЕ 10, но с префиксом ms-grid и в старом синтаксисе:
1. Нет gap. Чтобы имитировать отступы gaps, надо добавлять дополнительные колонки и строки в сетку.
2. Нет repeat, но это легко преодолевается через использование :nth-child и т. п. с выражением в скобках (ax + b).
3. Нет автоматической расстановки auto-placement. В рамках CSS этого не преодолеть, нужно добавлять полифил через JavaScript.

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Как бороться с багами? Часть четвёртая: отслеживать производительность Что такое непрерывная доставка? Специфичность селекторов в ЦСС Как написать аккуратный код? Часть четвёртая: ответственность




Недавно всплыло

Как выжить в дистанционной работе. Инструменты на удалёнке 4 Как нанимать исполнителей на временную работу в отдельные проекты? 1 Мне пока ни разу не удалось выбрать человека, который написал бы правильный текст 1 6