Каталог RSS-каналов
Статистика

RSS-каналов в каталоге: 3393

Добавлено сегодня: 0

Добавлено вчера: 0

Hi-Tech / Интернет

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

CSS-LIVE 13.02.2018 в 12:34

Жизнь во фронтенде

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

Перевод статьи 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-раскладки, позволяющая разработчику очень легко размещать элементы по двумерной сетке.

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

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

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

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

label label label ...

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

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

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

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

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

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

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

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

label label label ...

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

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

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

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

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

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

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

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

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

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

Другие записи ленты

Еженедельная подборка красивых эффектов на CSS/SVG/JS #69 09.02.2018 в 19:22

Ссылки против кнопок в современных веб-приложениях 09.02.2018 в 10:47

Вникаем в механизмы Redux, делая своё хранилище (Store) 04.02.2018 в 12:21

Гриды 2 уровня не за горами! 03.02.2018 в 17:15

Новые спецификации CSS-селекторов 02.02.2018 в 18:01

Еженедельная подборка красивых эффектов на CSS/SVG/JS #68 02.02.2018 в 09:17

Вы освоили азы JavaScript. Но что дальше? 28.01.2018 в 10:21

Снова о CSS Box Alignment (свойствах для выравнивания всего): простая шпаргалка 27.01.2018 в 15:33

Еженедельная подборка красивых эффектов на CSS/SVG/JS #67 22.12.2017 в 12:39

Еженедельная подборка красивых эффектов на CSS/SVG/JS #66 15.12.2017 в 07:20