Способы построения колонок в CSS

Мы рассмотрим варианты построения макета на основе 4 колонок. Во-первых, такое распределение информации является очень популярным, во-вторых, они хорошо перестраиваются в 2 колонки для планшетов и в одну для телефонов. В третьих, все размеры в примерах указаны в процентах, и при небольшом изменении ширины вы получите 2-х, 3-х или 5-6-колоночный макет.

Для начала определимся с размерами основного контейнера, в котором все колонки будут находится. Для него выделен класс .container с такими свойствами:

Свойство border в нем необходимо для того, чтобы видеть, где находятся пределы родительского элемента. Кроме того, в большинстве случаев нам понадобится еще класс .row, который отвечает за одну линию (row - строку в переводе с англ. языка), и нужен для формирования внутренних колонок с классом .column. Правила для них смотрите в каждом примере на вкладке CSS.

Постоянными стилями для .row будут отрицательные внешние отступы слева и справа.

Остальные стили будут зависеть от способа формирования колонок.

Все примеры находятся на ресурсе codepen.io и могут быть открыты для редактирования на нем с помощью кнопки . Кроме того, примеры подразумевают наличие правил для различных разрешений экрана. Чтобы протестировать изменение внешнего вида при различных разрешениях экрана, переключитесь в Full Page View, щелкнув на кнопке Change View в правом верхнем углу. Кнопка Settings позволит вам посмотреть настройки для различных вкладок, например, увидеть ссылку на GoogleFonts для загрузки шрифта из примера.

Надеюсь, что с общими параметрами и настройками примеров все понятно, поэтому перейдем сразу к практике.

Варианты, основанные на Flexbox-модели

Flexbox-модель стала очень популярной за счет своей гибкости и легкости перестраивания размеров под любые разрешения экранов. Именно поэтому ее использует такие популярные фреймворки, как Bootstrap, Foundation, и другие.

Мы рассмотрим здесь 3 варианта построения колонок на основе Flexbox-модели, основанные на разных принципах.

Вариант 1. Колонки а-ля Bootstrap-4

Особенностью таких колонок является то, что они имеют размер в виде свойства flex: 0 0 25%, что делит ширину их контейнера на 4 равные части. Отступы формируются за счет правого и левого padding в 15px.

В примере ниже видно, что рамки колонок "прилипают" друг к другу, но, если их убрать, отступы между колонками сформируются как раз за счет padding. Если вам нужно будет задать background-color, отличный от прозрачного или белого, придется внутри <div class="column"> формировать какой-либо <div class="inner"> с собственными отступами-padding-ами, и background-color задавать уже для .inner.

See the Pen 4 flex columns a-la Bootstrap-4 by Elen (@ambassador) on CodePen.

Вариант 2. Колонки, распределяемые по ширине за счет свойства justify-content: space-between

В этом примере код для .column похож на предыдущий, за исключением того, что ширина колонки задана правилом flex: 0 0 24%, а для .row добавлено свойство justify-content: space-between. За счет этого колонки распределяются равномерно по всему контейнеру, а 1% от его ширины уйдет на формирование отступов между колонками.

See the Pen 4 Flex-columns and justify-content for row by Elen (@ambassador) on CodePen.

Вариант 3. Колонки с внешними отступами

В этом варианте вместо padding-left и padding-right у нас появляются margin-ы. Однако внешние отступы не входят в модель расчета ширины элемента, основанной на свойстве box-sizing: border-box, в отличие от padding и border. Поэтому от ширины необходимо отнимать удвоенный размер margin (15px*2 = 30px). В результате получаем такие свойства.

Пример вживую.

See the Pen 4 Flex-columns with margins by Elen (@ambassador) on CodePen.

Варианты 4-хколоночного макета на основе Grid

В случае с Grid (системой сеток) основным формирователем размеров может выступать, не класс .column, а класс .row. Поэтому стоит обращать внимание на список его свойств.

Способ 1. Использование grid-template-columns: 1fr 1fr 1fr 1fr и колонок с внешними отступами

В этом примере для класса .row назначено свойство grid-template-columns: 1fr 1fr 1fr 1fr, что обеспечивает одинаковую ширину для всех колонок. Для отступов, которые описаны в классе .column, использованы внешние margin: 15px.

See the Pen grid-template-columns: 1fr 1fr 1fr 1fr by Elen (@ambassador) on CodePen.

Способ 2. Использование повторения и колонок с внутренними отступами

В этом примере для  .row вроде бы использовано похожее на предыдущее свойство grid-template-columns: repeat(4, 25%). Можно заменить это значение на grid-template-columns: repeat( auto-fit, 25%) или grid-template-columns: repeat( auto-fill, 25%) - вы получите аналогичный результат.

Также здесь вместо внешних отступов в классе .column были использованы внутренние padding-left и padding-right  в 15px. Это не является обязательным. Вы можете использовать и вариант с margin-left и margin-right  в 15px - в этом случае изменятся границы колонок.

See the Pen grid-template-columns: repeat(4, 25%) by Elen (@ambassador) on CodePen.

Обратите внимание на стили в медиа-запросах. Они по сути похожи, но отличаются вариантами записи.

Использование колонок со свойством display: inline-block

Способ 1. Колонки только с внутренними отступами

По сравнению со строчными элементами строчно-блочные (а именно так можно перевести значение свойстваdisplay: inline-block) позволяют нормально отобразить все отступы и ширину элемента, но выстраиваются в одну линию друг рядом с другом, а не один под другим, как блочные теги. Поэтому их вполне можно использовать для построения колонок. Тем не менее у них есть ряд особенностей, которые могут привести к непониманию того, почему последний элемент (колонка) съезжает вниз.

Собственно, в примере ниже учтено то, что после каждого inline-block-элемента образуется отступ в 1 пробельный символ, а также то, что колонки разной высоты выравниваются по нижней, а не по верхней линии.

В примере использованы только внутренние отступы. Внешние совсем малы - порядка 3px - размер 1 пробельного символа.

See the Pen Inline-block columns by Elen (@ambassador) on CodePen.

Есть 1 серьезный минус у таких колонок по сравнению с вариантами Flexbox- или Grid-модели: если у колонок разная высота и для них задан background-color, то это будет довольно сильно бросаться в глаза. Выход здесь таков: задать минимальную высоту (min-height) для определенных разрешений экранов.

Способ 2. Колонки с внутренними и внешними отступами

В том случае, если вам необходимы и внутренние, и внешние отступы, код будет несколько сложнее. Вам придется немного заняться арифметикой, т.к. без расчетов здесь не обойтись. Во-первых, мы будем использовать только margin-right, margin-left нам не понадобится. Во-вторых, для последней колонки (.column:last-of-type) необходимо отключить margin-right, указав значение 0.

А теперь расчеты. Ширина контейнера = 100%. Мы отведем на каждую из колонок 24%, тогда на отступы между ними останется 100% - 24%*4 = 4%. Отступов у нас 3 (у 4-й колонки за ненадоностью мы его отключили), поэтому каждый оступ будет равен 4%/3 = 1.33%.

Итоговые стили:

Смотрим на реализацию. Обращаем внимание на свойства в медиа-запросах.

See the Pen Inline-block columns with padding and margin by Elen (@ambassador) on CodePen.

А вы думали, зачем вам в школе математика? Вот - пригодилась.

Использование CSS свойства columns

Вы можете задать количество колонок с помощью CSS-свойства columns. Достаточно поставить нужную цифру в качестве значения этого свойства для родительского элемента (.row в примере) - и все будет работать. Есть нюанс с поддержкой более ранних версий браузеров, когда это свойство нужно использовать с вендорными префиксами:

• Firefox до версии 52 поддерживает свойство -moz-columns.
• Safari до версии 9, Chrome до версии 50 и Android до версии 80 поддерживают свойство -webkit-columns.

На самом деле, свойство columns далеко не единственное, которым вы можете управлять. В "компании" с ним есть еще column-gap, управляющее отступами между колонками, column-width - ширина колонок, column-rule, отвечающее за вывод разделительной линии между колонками, а также  column-rule-color, column-rule-style и column-rule-width, которые управляют цветом, видом и толщиной разделительной линии по аналогии со свойством border-color, border-style и border-width для рамки (границы) в блочной модели. Для заголовков, которые должны находится над всеми колонками, можно использовать свойство column-span.

See the Pen CSS property columns by Elen (@ambassador) on CodePen.

Использование свойств display: table + display: table-cell для колонок

Таблицы в свое время использовались для верстки сайтов, хотя для этой цели не разрабатывались. Плюсом их использования было то, что все ячейки таблицы всегда имеют одинаковую высоту и размещаются плотно друг к другу. Поэтому раньше колонки формировали с помощью тегов <td>. Этот способ не отличался гибкостью, но тем не менее был очень популярен в конце 1990-х годов и начале 2000-х.

Мы можем сформировать колонки на основе свойств display: table и display: table-cell, добавив их, соответственно, к классу .row  и классу .column.

Внутри колонок есть внутренние отступы (padding), т.к. их можно задавать для ячеек. А вот внешние (margin) задавать бесполезно (можете раскомментировать строку 28 на вкладке CSS и убедиться самостоятельно. Для того чтобы задать внешние, необходимо использовать свойство, характерное для стилевого оформления таблиц, а именно border-spacing(раскомментируйте строку 19 примера).

See the Pen Columns a-la table by Elen (@ambassador) on CodePen.

Проблема этого варианта - в отсутствии гибкости для разных разрешений экрана - таблица "не гнется". Поэтому меняем display: table на block для .row и table-cell на inline-block для .column, а также пересчитываем длину и изменяем внешние отступы.

Использование float: left для колонок

Довольно долгое время именно этот способ применялся для верстки колонок в Bootstrap 3-й версии.  У него, как и у inline-block элементов есть особенность, которая имеет свое решение: схлопывание высоты контейнера с плавающими (float) элементами.

Поэтому для класса .row мы добавляем 2 правила для псевдоэлементов ::before и ::after:

Это отменит схлопывания высоты контейнера для float-элементов. Сами колонки имеют такие свойства:

Сам пример:

See the Pen Float columns by Elen (@ambassador) on CodePen.