Перевод статьи CSS Grid + CSS Multi-Columns = ♥ с сайта medium.com для CSS-live.ru, автор — Патрик Броссет

В этой короткой статье я рассматриваю связь между двумя раскладочными инструментами из CSS: CSS-гриды и CSS-колонки.

Эти два инструмента можно использовать вместе весьма интересными способами для построения отзывчивых веб-дизайнов.

Начнём с обзора, что каждый из их делает.

CSS-колонки

CSS уже давно умел размещать контент по колонкам, и у них очень хорошая поддержка во всех актуальных браузерах (правда, для них по-прежнему нужны префиксы). (прим. перев.: для актуальных версий уже и префикс не нужен)

Чаще всего CSS-колоноки нужны, чтобы разбивать длинные разделы текста на несколько колонок, чтобы строки не становились такими длинными, что их неудобно читать.

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

Например, можно определить совсем простую многоколоночную раскладку с помощью CSS-свойства column-width: 150px; и браузер просто добавит в доступную область столько колонок, сколько их вмещается:

Длинный текст перетекает из колонки в колонку

CSS-гриды

CSS-гриды — новая потрясающая система CSS-раскладки, позволяющая разработчику очень легко размещать элементы по двумерной сетке.

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

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

Колонки + гриды = ♥

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

<style>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 2em;
  grid-gap: .5em;
}
</style>
<div class="grid">
  <label>label</label>
  <input type="text">
  <label>label</label>
  <input type="text">
  <label>label</label>
  <input type="text">
  ...
</div>

В CSS выше создаются две колонки одинакового размера, которые будут автоматически заполняться элементами, как показано ниже:

Простой двухколоночный грид на CSS

А вот теперь интересный момент: на самом деле можно разместить грид в колоночной раскладке! И это просто круто!

В принципе, грид поддерживает разбивку на фрагменты, а значит он тоже будет перетекать по колонкам. Он будет разбит на фрагменты, где нужно, по фрагменту на колонку. Эти фрагменты — всего лишь части одного и того же грида.

Итак, давайте возьмём простой пример формы на основе грида, и посмотрим что будет, если положить её внутрь многоколоночной раскладки с column-width: 150px:

CSS-грид разбился на несколько фрагментов.

Посмотрите, как по мере доступной области грид разбивается по фрагментам, чтобы занять доступные колонки.

Вот так мог бы выглядеть весь код:

<style>
.columns {
  column-width: 200px;
  max-width: 800px;
  margin: 0 auto;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 2em;
  grid-gap: .5em;
}
</style>
<div class="grid">
  <label>label</label>
  <input type="text">
  <label>label</label>
  <input type="text">
  <label>label</label>
  <input type="text">
  ...
</div>

В числе прочего, замечательно здесь то, что весь контент находится в одном гриде, даже когда грид разбивается по нескольким фрагментам. Поэтому, к примеру, размер грид-колонки будет всегда одинаковым во всех фрагментах.

Фрагментирование внутренних отступов и границ

Если по какой-то причине вам захочется добавить самому гриду границу и внутренний отступ, тогда произойдёт примерно следующее:

Обрезанные границы и отступы

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

Очевидно, выглядит не очень. К счастью, и это можно решить с помощью CSS — свойства box-decoration-break. Оно определяет, как фон, границы, внешние и внутренние отступы должны работать в случаях с фрагментацией (или в случаях, когда инлайн-элемент переносится на несколько строк текста).

С помощью box-decoration-break: clone; можно получить ожидаемое поведение:

Границы и отступы теперь клонированы во всех фрагментах

Вот и всё! Можете поиграть со сложными примерами здесь на codepen, он также включает несколько забавных маленьких CSS-счётчиков, благодаря которым я пронумеровал подписи одним лишь CSS.

Счастливого коддинга, и до встречи!

P.S. Это тоже может быть интересно:

• Голограммы, пленочные засветки и шейдеры на чистом CSS
• CSS-выражения от контейнера для дизайнеров
• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами