В продолжение своего топика Новое в CSS3: многоколоночность, flexbox, сеточная разметка предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.
Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div’ов. Но все может стать намного проще с CSS3 Multi Column Module.
Официальная спецификация, Поддержка браузерами.
Создание контента, разбитого на несколько колонок
Используем HTML5-тег article:
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
amet tincidunt orci placerat in. Integer vitae consequat augue.
//и т.д.
</article>
Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Список поддерживаемых браузеров уже достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную javascript-библиотеку.
Многоколоночный текст | htmlbook.ru
Текст в несколько колонок давно уже применяется в издательском деле при вёрстке газет, журналов и книг. Человеку комфортнее читать текст определённой ширины, колонки как раз и обеспечивают разбиение большого текста на столбцы заданного размера. На сайтах это не всегда имеет смысл делать из-за ограниченности высоты окна браузера. Читателю вначале придётся прокрутить одну колонку вниз до конца, а затем вернуться наверх к началу следующей колонки, что довольно неудобно. Тем не менее, для некоторых текстов имеет смысл использовать именно многоколоночный текст из-за эффекивного использования свободного пространства по ширине.
CSS3 предлагает сразу четыре свойства для создания и управления колонками: column-count, column-gap, column-width и column-rule. Для наглядности значения некоторых свойств показаны на рис. 1.
Рис. 1. Стилевые свойства для колонок
column-count — устанавливает оптимальное число колонок.
column-gap — расстояние между колонками.
column-width — оптимальная ширина колонок.
column-rule — разделительная линия между колонками.
Следует пояснить, что такое «оптимальное число» и «оптимальная ширина». Свойство column-count задаёт не точное количество колонок, а скорее желаемое. Браузер постарается разбить текст именно на столько колонок, но при уменьшении размеров окна будет сокращать число колонок, чтобы сохранить комфортность чтения. Аналогично обстоит и с шириной. Свойство column-width указывает минимальную ширину колонки, при этом браузер это значение может проигнорировать, если размер окна недостаточен для обеспечения заданной ширины колонок.
Браузер Chrome и Safari понимают эти свойства только с префиксом -webkit, а Firefox только с префиксом -moz. Комбинируем свойства для разных браузеров и получаем код, который создаёт трёхколоночный текст (пример 1).
Пример 1. Три колонки
HTML5CSS 3IE 9IE 10CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Колонки</title>
<style>
.column {
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
-webkit-column-rule: 1px solid #ccc;
-moz-column-rule: 1px solid #ccc;
column-rule: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<p>Дистинкция дискредитирует непредвиденный интеллект, учитывая опасность,
которую представляли собой писания Дюринга для не окрепшего еще немецкого
рабочего движения. Аподейктика порождена временем. Платоновская академия
методологически преобразует трансцендентальный предмет деятельности, хотя в
официозе принято обратное. Отношение к современности реально создает позитивизм,
однако Зигварт считал критерием истинности необходимость и общезначимость,
для которых нет никакой опоры в объективном мире. Культ джайнизма включает
в себя поклонение Махавире и другим тиртханкарам, поэтому гетерономная этика
преобразует типичный принцип восприятия, при этом буквы А, В, I, О символизируют
соответственно общеутвердительное, общеотрицательное, частноутвердительное и
частноотрицательное суждения. Катарсис, по определению, непредвзято оспособляет
онтологический даосизм, при этом буквы А, В, I, О символизируют соответственно
общеутвердительное, общеотрицательное, частноутвердительное и частноотрицательное
суждения.</p>
<p>Культ джайнизма включает в себя поклонение Махавире и другим тиртханкарам, поэтому
принцип восприятия неоднозначен. Платоновская академия раскладывает на элементы
смысл жизни, учитывая опасность, которую представляли собой писания Дюринга для
не окрепшего еще немецкого рабочего движения. Ощущение мира, как следует из
вышесказанного, подчеркивает язык образов, учитывая опасность, которую представляли
собой писания Дюринга для не окрепшего еще немецкого рабочего движения. Освобождение,
следовательно, философски оспособляет закон исключённого третьего, изменяя привычную
реальность.</p>
</div>
</body>
</html>
Результат данного примера в браузере Chrome показан на рис. 2. Вместо трёх колонок мы наблюдаем две из-за малой ширины окна браузера. При увеличении размеров окна число колонок вырастет до заданного, при дальнейшем уменьшении ширины окна, наоборот, количество колонок сократится до одной.
Рис. 2. Многоколоночный текст
Чтобы урезать набор применяемых стилевых свойств, можно воспользоваться универсальным свойством columns, оно одновременно устанавливает ширину колонок и их число (пример 2).
Опять же, для работы некоторых браузеров требуется добавить свои префиксы. Расстояние между колонок и параметры разделительной линии, если это требуется, приходится задавать дополнительными свойствами. Если column-gap и column-rule не указаны, линия между колонок не отображается, но некоторое минимальное расстояние между колонок в любом случае сохраняется.
Где и как использовать мультиколонки (CSS Columns) / Хабр
При всём ажиотаже вокруг технологий CSS Grid и Flexbox, часто упускается из виду другой метод разметки. В этой статье я хочу рассмотреть многоколоночный макет — часто называемый просто «Multicol» или «CSS Columns». Вы узнаете, для каких задач он подходит и какие нюансы следует учитывать при его использовании.
Что такое мультиколонки?
Основная идея мультиколонок заключается в том, что вы можете взять фрагмент содержимого и поместить его в несколько колонок, как в газете. Вы делаете это с помощью одного или двух свойств. Свойство column-count задаёт количество колонок, на которое вам бы хотелось разбить содержимое. Свойство
column-width задаёт идеальную ширину, давая возможность браузеру самому определить, сколько колонок при этом поместится.
Неважно, какие элементы находятся внутри блока, который вы превращаете в многоколоночный контейнер, все элементы остаются в обычном потоке, но разбиваются на колонки. Это делает CSS Columns непохожим на другие методы вёрстки, которые у нас есть в браузерах сегодня. Flexbox и Grid, например, берут дочерние элементы контейнера, а затем эти элементы участвуют в flex или grid макете. В случае с CSS Columns, у вас всё ещё имеется обычный поток, только не внутри самой колонки.
В примере ниже я использую column-width, чтобы сделать колонки шириной как минимум 14em. CSS Columns определяет, сколько колонок шириной 14em поместятся в контейнере, а затем распределяет между ними оставшееся пространство. Колонки будут иметь ширину не меньше 14em, кроме ситуации, когда помещается только одна колонка, в этом случае она может становиться уже. CSS Columns стал первым случаем, в котором мы столкнулись с подобным поведением в CSS, создавая колонки, которые по умолчанию были отзывчивыми. Нет необходимости добавлять медиа-выражения и изменять количество колонок на разных контрольных точках, вместо этого мы указываем оптимальную ширину и браузер будет работать с ней.
Стилизация колонок
Блоки колонок, созданные с помощью свойств CSS Columns, не могут быть выбраны для стилизации. Вы не можете выбрать их с помощью JavaScript или стилизовать отдельный блок, чтобы задать ему цвет фона или настроить padding или margin. Все блоки колонок будут одинакового размера. Единственное, что вы можете сделать, — это добавить разделительную линию между колонками, используя свойство
column-rule, которое работает как border. Вы также можете настраивать отступ между колонками, используя свойство column-gap, которое имеет значение по умолчанию 1em, однако вы можете изменить его на любую другую допустимую единицу длины Это базовый функционал CSS Columns. Вы можете взять часть содержимого и разделить на колонки. Содержимое будет заполнять колонки, создавая их в линейном направлении. Вы можете контролировать промежуток между колонками и добавить разделительную линию, указав те же значения, что и у border. Пока что всё идет хорошо, а всё вышеперечисленное очень хорошо поддерживается в браузерах и уже на протяжении длительного времени, что делает эту спецификацию очень безопасной для использования с точки зрения обратной совместимости.
Существуют особенности функционала CSS Columns и некоторые потенциальные проблемы, которые следует учитывать при использовании колоночного макета в вебе.
Охват колонок
Порой вам может потребоваться разбить некоторый контент на колонки, но затем один элемент разместить поперек, охватив блоки колонок. Достигнуть этого можно, применив свойство column-span к потомку колоночного контейнера.
В примере ниже, я заставила элемент <blockquote> охватить колонки. Заметьте, когда вы делаете это, содержимое разбивается на набор полей выше этого элемента, затем начинает новый набор колонок ниже него. Содержимое не перепрыгивает через охватывающий элемент.
На данный момент свойство column-span по умолчанию работает во всех браузерах, кроме Firefox. В нём оно еще разрабатывается и скрыто за флагом
Имейте в виду, что в текущей спецификации значением свойства column-span может быть только all или none. Вы не можете охватить только некоторые колонки, но можете получить такой результат, комбинируя колоночный макет с другими методами вёрстки. В следующем примере у меня есть Grid-контейнер с двумя столбцами. Левый столбец имеет ширину 2fr, а правый — 1fr. В левом столбце я обернула статью в колоночный контейнер с двумя колонками, также имеющими охватывающий элемент.
Справа остаётся содержимое, которое располагается во втором Grid-столбце. Играя разными доступными нам методами вёрстки, мы можем точно определить, какой из них лучше всего подходит в конкретной ситуации — не бойтесь совмещать их.
Контроль переноса содержимого
Если в колоночном контейнере содержатся заголовки, вы наверняка хотели бы избежать ситуаций, в которых они разрываются и часть заголовка или текст под заголовком переносится в следующую колонку. Если у вас есть изображения с подписями, было бы лучше, чтобы и изображение и подпись оставались одним целым, без разрыва между колонками. Специально для таких ситуаций, в CSS есть свойства для управления переносом содержимого.
Разделяя содержимое на колонки, вы выполняете так называемую фрагментацию. То же самое справедливо, если вы разделяете ваш контент между страницами, например, когда создаёте стили для печати. Следовательно, колонки ближе к Paged Media, чем к другим методам разметки в вебе. Из-за этого, в течение нескольких лет способом контроля переносов в содержимом было использование свойств page-break-, которые были частью CSS 2.1.
page-break-before
page-break-after
page-break-inside
Позже спецификация CSS Fragmentation определила свойства, которые были разработаны для любого фрагментированного контекста, спецификация включает подробности для Paged Media, CSS Columns, и отложенной спецификации Regions; Regions также фрагментирует непрерывный фрагмент содержимого. Сделав эти свойства общими, их можно применять к любому будущему фрагментированному контексту, точно так же, как свойства выравнивания из Flexbox были перемещены в спецификацию Box Alignment для того, чтобы их можно было использовать в Grid и Block разметке
break-before
break-after
break-inside
Как пример, я использовала свойство bread-inside: avoid для элемента <figure>, чтобы предотвратить отделение подписи от самой картинки. Браузер, поддерживающий это свойство, должен сохранить элемент цельным, даже если колонки при этом будут выглядеть неравномерными. К сожалению, поддержка этих свойств в CSS Columns довольно неоднозначна. Но даже там, где они поддерживаются, их следует рассматривать как предложение из-за того, что необходимо делать так много запросов, чтобы контролировать перенос, что браузер, по сути, не может делать перенос в любом месте. Спецификация определяет приоритеты в этом случае, однако для вас это может быть даже более полезно контролировать только наиболее важные ситуации.
Проблема колонок в вебе
Одна из причин, почему мы не видим массового использования CSS Columns в вебе, заключается в том, что это привело бы к изменению взаимодействия читателя со страницей, вынуждая его прокручивать не вверх-вниз, а в сторону. Согласитесь, это не очень удобно.
Если вы зафиксируете высоту контейнера, например, используя единицу измерения области просмотра vh, а содержимого будет слишком много, тогда переполнение произойдет в строчном направлении и мы получим горизонтальную прокрутку.
Указанная проблема делает использование CSS Columns в вебе тем, с чем мы должны работать очень осторожно с точки зрения количества размещаемого в нём содержимого.
Колонки, переполняющие блок
Для уровня 2 спецификации CSS Columns мы рассматриваем, как включить метод, с помощью которого переполненные колонки, те которые в данный момент приводят к появлению горизонтальной прокрутки, вместо этого увеличивались в блочном направлении.
Это значит, что вы можете иметь колоночный контейнер с фиксированной высотой, и как только содержимое создаст колонки, заполняющие этот контейнер, новый набор колонок будет создан ниже. Это было бы в чем-то похоже на наш пример выше с охватывающим элементом, однако вместо охвата, вызывающего новый блок колонок, это будет переполнение, вызванное контейнером с ограничением в блочном измерении.
Этот функционал сделал бы колонки существенно более полезными в вебе. Хотя мы всё еще далеки от этого, вы всё же можете следить за этой проблемой в репозитории рабочей группы CSS. Если у вас есть дополнительные примеры использования этого функционала, напишите о них, это действительно помогает, когда разрабатывается новый функционал.
Чем мультиколонки полезны сегодня?
С текущей спецификацией не рекомендуется разделять всё содержимое на колонки без учета возможных проблем с прокруткой. Тем не менее, есть некоторые ситуации, когда колонки идеально подходят. Существует достаточно примеров, достойных рассмотрения, когда вы ищете шаблоны проектирования.
Сокращение небольших элементов интерфейса или текста
Мультиколонки могут быть полезны в любом месте, где имеется небольшой список элементов, который должен занимать меньше пространства. Например, простой список чекбоксов или список имен. Часто в подобных ситуациях посетитель не читает до конца одну колонку, после чего возвращается наверх к началу следующей, а ищет в содержимом чекбокс для нажатия или ссылку для перехода. Даже если возникнет ситуация с появлением прокрутки, это не должно быть проблемой.
Вы можете видеть пример подобного использования колонок на сайте DonarMuseum
Заранее известное небольшое количество содержимого
Бывают ситуации, когда при разработке сайта нам заранее известно, что количество определенного содержимого будет небольшим и поместится на большинстве экранов, не вызывая нежелательной прокрутки. Я использовала колонки на страницах презентации на Notist для введения.
Andy Clarke разработал прекрасный пример для сайта Equfund
Чтобы избежать ситуаций возникновения прокрутки на очень маленьких экранах, помните, что можете использовать медиа-выражения для проверки высоты области просмотра так же, как и ширины. Если включите колонки только на тех контрольных точках, которые имеют минимальную высоту min-height больше достаточной для содержимого, это может спасти пользователей очень маленьких устройств.
Masonry-подобное отображение контента
Другой пример, когда колоночный макет отлично работает — в ситуациях, когда вы хотите отобразить содержимое в стиле Masonry. Колонки в данный момент — это единственный метод разметки, который создаст этот тип разметки с элементами разной высоты. CSS Grid не оставит отступ или растянет элемент, чтобы строго соответствовать двухмерной сетке.
У Veerle Pieters есть отличный пример использования колонок для этих целей на её вдохновляющей странице.
Grid и Flexbox фолбеки
Свойства column- также могут быть использованы как фолбек для Grid или Flex макета. Если вы укажете одно из колоночных свойств для контейнера, а затем превратите этот контейнер во Flex или Grid макет с помощью display: flex или display: grid любое поведение колонок будет отменено. Если у вас есть, например, карточный макет, который использует CSS Grid, и при этом будет удобочитаемым в нескольких колонках, можно использовать колонки как простой запасной вариант. Браузеры, которые не поддерживают CSS Grid, получат колоночное отображение, те которые поддерживают, получат Grid-сетку.
Не забывайте про мультиколонки!
Довольно часто, отвечая на вопросы о выборе между Grid или Flexbox, вместо них я рекомендую мультиколонки. Возможно, вы не будете использовать их на каждом сайте, но когда столкнетесь с подходящей задачей, они могут стать действительно полезными. На MDN присутствуют полезные ресурсы по CSS Columns и связанным с ними fragmentation properties.
Если вы используете колонки в своем проекте, возможно вам стоит оставить упоминание об этом в комментариях, чтобы поделиться другими способами использования этого функционала
Текст в две колонки CSS
Несколько примеров, как вывести текст в две колонки одинаковой ширины и отступом между ними.
1
Inline-block
Метод основан на свойстве display: inline-block, но у него несколько особенностей:
У блочно-строчных элементов появляются отступы из-за пробелов между элементам, решается это установкой white-space: nowrap у родителя.
Нужно выровнять блоки по верхний границе с помощью свойства vertical-align: top.
<div>
<div>
Текст левой колонки
...
</div>
<div>
Текст правой колонки
...
</div>
</div>
Второй метод основан на табличном отображении элементов. Имеет недостаток т.к. нужен контейнер эмитирующий <tr> (хотя работает и без него).
Вторая проблема с отступами между колонками – если применять свойство border-spacing, то отступы появятся не только между колонками, но и снаружи, поэтому приходится добавлять border через :first-child и :last-last.
К достоинтству метода можно отнести то, что колонки будут одинаковой высоты.
<div>
<div>
<div>
Текст левой колонки
...
</div>
<div>
Текст правой колонки
...
</div>
</div>
</div>
Flexbox – способ выстраивания элементов по оси. Состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.
<div>
<div>
Текст левой колонки
...
</div>
<div>
Текст правой колонки
...
</div>
</div>
Отличительной особенностью полиграфического дизайна является повсеместное применение колоночной верстки. И тому есть веские основания.
Во-первых, глаз лучше воспринимает строки текста состоящие из 8 до 12 слов. Во-вторых, можно гораздо лучше организовать колонки и уменьшить количество пустого пространства на странице. Долгое время это являлось исключительным преимуществом полиграфии. В вебе же приходилось всячески извращаться. Но теперь CSS3 позволяет создавать колоночную верстку без использования JavaScript.
Колоночная модель
Спецификации W3C определяют несколько новых свойств, позволяющих задавать колонки в HTML-верстке. Теперь как и в полиграфии можно задать ширину колонок, их количество и даже некоторые правила поведения.
Существенным в спецификации является то, что у колоночного элемента должны быть явно указано значение количества колонок и/или ширина колонок. Браузеры должны отображать колоночные элементы образом схожим с отображением таблиц, но содержимое будет распределяться по колонкам динамически.
На настоящий момент, нет возможности определять свойства отдельных колонок (например, цвет отдельной колонки). Будем надеяться, что после того, как все текущие предложенные в реализацию свойства будут реализованы, появятся и свойства управления колонками.
Количество и ширина колонок
Для создания колоночного элемента необходимо задать свойства сolumn-count и/или column-width.
column-count
По-умолчанию, column-count имеет значение auto. Т.е. если задать column-width, браузер самостоятельно вычислит количество колонок необходимое для отображения многоколоночного элемента. Такое поведение не всегда удобно, потому зададим количество колонок, в которых находится контент.
Как сказано выше, можно задать ширину колонок не указывая количество колонок, а браузер вычислит его динамически. Ширину колонок можно указывать любыми единицами измерения доступными в CSS: em, px, %.
Линейка тоже пришла из полиграфии. Изначально, линейки – это тонки линии между колонками, облегчающие чтение или разделяющие отдельные рассказы. CSS3 предоставляет три различных свойства настройки линейки: column-rule-size, column-rule-style и column-rule-color, а можно использовать column-rule для указания всех трёх свойств.
Как вы уже наверно догадались, могут использоваться все обычные единицы измерения, стили и цвета:
На текущий момент семейство свойств column поддерживаются браузерами на основе WebKit или Mozilla.
Как вы уже заметили, в коде используются модификаторы движков. Если не указать модификатор, то даже поддерживающие браузеры проигнорируют свойства column-xxx.
Что будет если колонки ограничить по высоте
Браузер добавит колонок, чтобы уместить текст.
Спасает overflow:hidden.
Отображение линейки в одной колонке
Если текст умещается в одной колонке, Mozilla не рисует линейку, а WebKit рисует. WebKit:
Mozilla:
Свойства, которые есть в спецификации, но не поддерживаются
Это свойства column-break и column-span.
Первое задумано как указатель того, что необходимо начать следующую колонку. Например перед тегами h3.
.column h3
{
column-break-before:always;
}
Второй позволяет отобразить элемент через все колонки, наподобие газетной врезки.
.column h2
{
column-span:all;
}
Заключение
Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания. По теме: Спецификация W3C: www.w3.org/TR/css3-multicol Статья, которую я перевел, но когда количество моих комментариев стало сопоставимо с текстом, написал свою собственную: www.kmsm.ca/2010/an-almost-complete-guide-to-css3-multi-column-layouts Хороший набор примеров: www.quirksmode.org/css/multicolumn.html Мой пример: unconnected.info/multicolumn.htm (мой сайт боится хабраэффектов, если не открылось, ай эм сорри) Снэпшот моего примера: http://www.peeep.us/a1660973 (спасибо kuzvac)
Введение в CSS3 Multicolumn. Работаем с колонками / Блог компании Microsoft / Хабр
Как расположить текст на странице в несколько колонок? И можно ли это делать автоматически? Наверняка, многие из тех из вас, кто занимается или занимался раньше веб-разработкой, сталкивались с такой задачей — и часто упирались в сложные решения, требующие хитрых стилей, либо применения дополнительных библиотек на JavaScript (см. например Columnizer-плагин для jQuery).
Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.
Замечание
В случае Internet Explorer 10 это автоматически означает возможность использования CSS3 Multi-column при разработке приложений в стиле Metro для Windows 8 с использованием HTML/CSS/JS.
В рамках статьи я не буду использовать браузерные префиксы, чтобы на запутывать код, но при реальном использовании не забудьте добавить поддержку префиксов для Firefox, Safari и Chrome.
Сразу отмечу еще две немаловажные детали.
Во-первых, в большинстве случаев применение многоколоночной верстки для текста можно рассматривать как развитие отображения контента сайта по пути Progressive Enhancement, в рамках которого пользователи более современных сайтов будут получать больше плюшек:
Во-вторых, многоколоночное отображение хорошо сочетается с возможностями Media Queries (и идеями отзывчивого дизайна, Responsive Design), например, при разных размерах экрана можно форматировать текст в разное количество колонок:
И последнее, что я хотел бы отметить во введении, чтобы на этом не останавливаться далее и со спокойной совестью перейти к техническим деталям: при использовании многоколоночной верстки текста надо помнить, что подобное расположение предполагает и определенный порядок чтения (для европейских языков слева направо). Поэтому важно, чтобы для перевода взгляда от одной колонки к другой было необходимо совершать как можно меньше дополнительных действий, особенно это касается вертикальных скроллов:
В этом смысле горизонтальная природа колонок лучше сочетается с горизонтальным скроллом (как это, используется во многих приложениях для Win8 — например, это хорошо видно по приложению USA Today):
В общем, колонки — это прекрасно, но не забывайте об удобстве пользователей. А теперь в бой!
Колонки
Итак, у нас есть текст (контент), который мы хотим разместить в несколько колонок. С чего начать?
Чтобы превратить такой элемент в многоколоночный нужно через стили в CSS выставить одно из свойств: column-width или column-count в значение, отличное от auto. Например,
чтобы разбить текст на две колонки, достаточно сделать так:
article {
column-count: 2;
}
Все остальное сделает браузер:
Альтернативное свойство — column-width — позволяет задать оптимальную ширину колонок:
article {
column-width: 150px;
}
При этом браузер сам разбивает контент на нужное количество колонок, чтобы заполнить внешний контейнер, подстраиваясь под указанную ширину колонок. Важный момент заключается в том, что реальная ширина может отличаться от заданной в большую или меньшую сторону: на картинке выше серая полоска имеет как раз ширину в 150px — и, как видно, она меньше, чем реальная ширина колонки.
Такое поведение определено спецификацией и позволяет (автоматически) добиться большей гибкости при разработке адаптивной разметки:
Например, если у вас контейнер шириной 100px и вы задали колонки шириной 45px, то браузер посчитает, что влезет только две колонки, а чтобы заполнить все место, увеличит размер каждой до 50px. (Здесь также учитывается отступ между колонками, о чем будет рассказано в следующем разделе.)
В определенном смысле, это можно рассматривать как альтернативу указанию с помощью Media Queries разного количества колонок в зависимости от размера окна и с автоматическим рассчетом ширины колонок:
Я второй раз говорю про альтернативу — и вот почему.
count vs. width
Как уже должно быть понятно из описания выше, спецификация дает два способа для задания количества и ширины колонок (кстати, у всех колонок она одинаковая!):
column-count позволяет указать число колонок, на которые нужно поделить контент, при этом ширину колонок определяет браузер с учетом доступного пространства.
column-width заходит с обратной стороны: указывает, какими примерно должны быть колонки, однако, оставляет рассчет их количества на усмотрение браузера.
В большинстве случаев вы будете использовать либо одно, либо другое, оперируя соответственно числами, либо длинами. Для упрощения записи есть такое короткое свойство columns, реагирующее на формат указываемых данных:
Что будет, если указать и количество колонок, и оптимальную ширину? Согласно спецификации, в этом случае column-count определяет максимальное количество колонок:
В спецификации вы также найдете псевдо-код, описывающий алгоритм рассчета количества колонок и их ширины.
Отступы и разделительные линии
Теперь, когда мы научились создавать колонки, самое время научиться управлять тем, что происходит между ними: отступами и разделительными линиями.
Чтобы изменить отступ между колонками, определено свойство column-gap. Чтобы визуально обозначить раздел между колонками, введено еще одно свойство — column-rule-*:
column-gap
column-gap позволяет указать ширину пространства между колонками. Свойство принимает в качестве значения длину, либо определяемое браузером значение normal (спецификация рекомендует использовать 1em), являющееся также значением по умолчанию:
article {
columns: 3;
column-gap: 3em;
}
Важно учитывать, что размер отступа между колонками используется при расчете ширины колонок и их количества. Например, если указано только количество колонок (как в примере выше), то ширина рассчитывается так:
W = ((available-width + column-gap) / N) - column-gap;
column-rule
Если для обозначения колонок свободного пространства недостаточно, можно использовать свойства column-rule-*, добавляющие линию между колонками. По своему поведению и заданию аналогичные свойствам border-*:
column-rule-color — цвет линии,
column-rule-style — стиль линии,
column-rule-width — ширина линии.
Как и в случае с границами блоков, есть краткая форма записи — просто column-rule:
Важный момент: разделительная линия отрисовывается ровно посередине отступа между колонками, при этом не занимая места. Если вдруг разделительная линия оказывается больше по ширине, она начинает пересекаться с контентом:
Причем отрисовывается разделитель сразу после фона (background) контейнера.
Разрывы
Распределение контента по колонкам — еще одна интересная задача, требующая иногда тонкого управления. По умолчанию, контент — это сплошная «масса», весьма прямолинейным образом, перетекающая из одной колонки в другую. Но что делать, если, скажем, я хочу быть уверенным, что в конце колонки у меня не повиснет одинокий заголовок? Или если мое визуально-эстетическое чувство требует, чтобы цитата не разрывалась на несколько колонок или даже больше: единолично занимала целиком всю колонку?
Для решения всех этих задач есть специальные свойства. Знакомьтесь:
break-before — что должно происходить перед блоком контента,
break-after — что должно происходить после блока контента,
break-inside — что должно происходить внутри блока контента.
Если вы знакомы с аналогичными свойствами, отвечающими за разбивку контента на страницы (page-break-*), то данные свойства для колонок ведут себя схожим образом: используют те же значения плюс несколько дополнительных (отмечены курсивом):
Думаю, из названий значений, в основном, должен быть понятен смысл действий. Например, чтобы в описанном выше предположении избежать появления разрывов внутри диалога и одновременно выделить его в отдельную колонку, мне достаточно указать:
Важный момент: на сегодня управление разрывами в колонках поддерживается только в Opera 11.10+, — что не удивительно, учитывая, что редактор спецификации Хокон Виум Ли, — и IE10.
Мои эксперименты со свежей версией Оперы и предварительной публичной версией IE10 показывают, что местами имеющиеся реализации отличаются друг от друга. Однако тут я затрудняюсь ответить, какой браузер ведет себя «правильней», так как спецификация хотя и содержит отдельный раздел, посвященный переполнению (overflow), все же оставляет некоторые нюансы на усмотрение браузера (например, позволяет появление дополнительных экстра-колонок при явном указании разрывов).
Растягивание на несколько колонок
Теперь, когда мы научились создавать колонки и немного управлять поведением контента, давайте научимся еще одному трюку — растягиванию контента на несколько колонок. Для этого есть специальное свойство: column-span, принимающее значения none и all.
Нас интересует второе значение. Оно выдергивает блок контента из общего многоколоночного потока и растягивает его на все колонки. При этом контент до этого элемента и контент после автоматически балансируются на все имеющиеся колонки.
В данном случае написанная крупным фраза из диалога растянута на все колонки. Обратите внимание на порядок следования текста: верхняя левая колонка, верхняя правая, фраза диалога, нижняя левая и далее нижняя правая.
Кстати, важный нюанс: если высота колонок ограничена, и дополнительного места под растягивание элементов нет, браузер может вполне легально игнорировать требование растягивания.
Растягивание элементов на сегодня все еще не поддерживается в Firefox.
Заполнение
И последняя деталь, которой вы, наверняка, уже должны были озадачиться: а как, собственно говоря, браузер решает, как ему заполнять колонки?
Для ответа на этот вопрос спецификация вводит свойство column-fill. Заполнять можно сбалансированно (balance), — именно так делается по умолчанию, — стараясь выдержать одинаковую высоту колонок; либо автоматически (auto), заполняя колонки последовательно.
Сравните, вот так браузер балансирует по умолчанию:
Управление заполнением на сегодня поддерживают только Internet Explorer и Opera.
Итоги
Прежде всего, продолжение повести А.П. Чехова «За яблочки» можно найти в Викитеке.
По существу дела, следя за развитием веб-стандартов, в том числе по некоторым моим статьям про CSS3 (см. например, статью про CSS3 Grid Layout), я надеюсь, вы с не меньшим вдохновением смотрите на открывающиеся перед веб-разработчиками возможностями. Адаптивные, гибкие и мощные средства для управления размещением контента все ближе и доступнее. А решение сложных задач — все проще.
Интерактив
Поиграться с работой CSS3 Multi-column можно на ietestdrive.com:
Пробуйте, эксперементируйте. Сообщайте разработчикам браузеров о багах. И не забывайте продумать, что увидят пользователи старых (и вроде бы современных, но все еще не полностью поддерживающих стандарт) браузеров — например, можно использовать плагин для jQuery Columnizer. Помните об адаптивности и зрителях маленьких и больших экранов.
Использование CSS разметки для многих колонок — Веб-технологии для разработчиков
CSS разметка для многих колонок расширяет способ блочной разметки, чтобы позволить легкое описание нескольких колонок текста. Людям сложно читать текст, если строки слишком длинные; это занимает слишком много времени для глаз, чтобы перемещать взгляд с конца одной на начало следующей строки, и они забывают на какой строке находились. Поэтому, чтобы использовать большие дисплеи по максимуму, авторам следует ограничить ширину колонок текст расположенных бок о бок, как в газетах.
К несчастью, это невозможно сделать с CSS и HTML без принудительного разбиения колонки в фиксированных позициях, или строго ограничить допустимую разметку в тексте, или использовать экстраординарный скрипт. Это ограничение снимается с помощью добавления новых CSS свойств, чтобы расширить традиционный блочный способ разметки.
Использование колонок
Количество колонок и ширина
Два свойства CSS контролируют появятся ли колонки и как много их будет: column-count and column-width.
Свойство column-count устанавливает количество колонок определённым числом. Пример,
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
отобразит содержимое в двух колонках (если вы используете многоколоночно совместимый браузер):
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Свойство column-width устанавливает минимальную желаемую ширину колонки. Если column-count также не установлено, тогда браузер автоматически сделает столько колонок, сколько нужно, чтобы заполнить доступную ширину.
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
становится:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Подробные детали описаны в CSS3 спецификации.
В многоколончатом блоке, содержимое автоматически перетекает из одной колонки в следующую, как это необходимо. Вся HTML, CSS и DOM функциональность поддерживается внутри колонок, как например редактирование и печать.
Краткая запись columns
В большинстве случаев веб-разработчики используют одно из двух свойств CSS: column-count или column-width. Так как значения для этих свойств не пересекаются, то часто удобно использовать короткую запись columns. Пример:
CSS объявление column-width:12em может быть заменено:
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
CSS объявление column-count:4 может быть заменено:
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Два CSS объявления column-width:8em и column-count:12 могут быть заменены:
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Выравнивание высоты
CSS3-спецификация колонок требует, чтобы высота колонки была выровнена, т.е. браузер автоматически устанавливает максимальную высоту колонки, для того, чтобы высота содержимого в каждой из них была приблизительно одинаковая. Firefox так и делает.
Однако, в некоторых ситуациях полезно установить максимальную высоту колонок явно, тогда расположение содержимого, начиная с первой колонки и последующих созданных, как необходимо, возможно, перекроют правую границу. Поэтому, если высота ограничена, с помощью CSS height или max-height свойств на многоколончатом блоке, каждой колонке разрешено расти до этой высоты, но не более, пока не добавится новая колонка. Этот режим также более эффективен для разметки.
Промежутки между колонками
Существует промежуток между колонками. По умолчанию рекомендовано значение 1em. Это значение можно изменить, применяя свойство column-gap на многоколончатом блоке:
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Постепенное ухудшение
Свойства колонки будут просто проигнорированы браузерами, которые не поддерживают многоколончатый режим. Поэтому соответственно легче создать разметку, которая отобразит содержимое в одной колонке и будет использовать несколько колонок в тех браузерах, которые поддерживают многоколончатый режим.
Обратите внимание, что не все браузеры поддерживают эти свойства без префикса. Чтобы использовать эти свойства в большинстве современных браузеров, каждое свойство должно быть написано трижды: одно с префиксом -moz , одно с префиксом -webkit и третье без префикса.
Заключение
CSS3 колонки — примитивная разметка, которая поможет Веб-разработчикам лучше воспользоваться реальным участком экрана. Разработчики с воображением могут найти много способов для их использования, особенно с автоматическим выравниванием высоты.
Смотрите также
Где и как использовать мультиколонки (CSS-столбцы) / Хабр
При всём ажиотаже вокруг технологий CSS Grid и Flexbox, часто упускается из виду другой метод разметки. В этой статье я хочу рассмотреть многоколоночный макет — часто называемый просто «Multicol» или «CSS Columns». Вы узнаете, для каких задач он подходит и какие нюансы следует учитывать при его использовании.
Что такое мультиколонки?
Основная идея мультиколонок заключается в том, что вы можете взять фрагмент содержимого и его в несколько колонок, как в газете.Вы делаете это с помощью одного или двух свойств. Свойство column-count задаёт количество колонок, на которое вам бы хотелось разбить содержимое. Свойство column-width задает идеальную ширину, давая возможность браузеру самому определить, сколько колонок при этом поместится.
Неважно, какие элементы находятся внутри блока, который вы превращаете в многоколоночный контейнер, элементы все остаются в обычном потоке, но разбиваются на колонки. Это делает столбцы CSS непохожим на другие методы вёрстки, которые у нас есть в браузерах сегодня.Flexbox и Grid, например, берут дочерние элементы контейнера, а затем эти элементы участвуют в flex или grid-макете. В случае с CSS-столбцами, у вас всё ещё имеется обычный поток, только не внутри самой колонки.
В примере ниже я использую ширину колонны , чтобы сделать колонки шириной как минимум 14em. Столбцы CSS определяют, сколько колонок шириной 14em поместятся в контейнере, а затем распределить между ними оставшееся пространство. Колонки будут иметь ширину не меньше 14em, кроме ситуации, когда она может становиться только одна колонка, в этом случае она может становиться уже.Столбцы CSS стали первым случаем, когда мы столкнулись с подобным поведением в CSS, создавая колонки, которые по умолчанию были отзывчивыми. Нет дополнительных параметров медиа-выражения и увеличения количества колонок на разных контрольных точках, вместо этого мы указываем оптимальную ширину и браузер будет работать с ней.
Стилизация колонок
Блоки колонок, созданные с помощью свойств CSS Columns, не могут быть выбраны для стилизации. Вы не можете выбрать их с помощью JavaScript или стилизовать отдельный блок, чтобы задать ему цвет фона или настроить padding или margin.Все блоки колонок будут одинакового размера. Единственное, что вы можете сделать, — это добавить разделительную линию между колонками, используя свойство , правило столбца , которое работает как border. Вы также можете настроить отступ между колонками, используя свойство , которое имеет значение по умолчанию 1em, однако вы можете изменить его на любую другую допустимую единицу длины Это базовый функционал CSS-столбцов. Вы можете взять часть содержимого и разделить на колонки.Содержимое будет заполнять колонки, создавая их в линейном направлении. Вы можете контролировать промежуток между колонками и добавить разделительную линию, указав те же значения, что и у границы. Пока что всё идет хорошо, все вышеперечисленное очень хорошо поддерживается в браузерах и уже на протяжении длительного времени, что делает эту спецификацию очень безопасной для использования точки зрения обратной совместимости.
Существуют особенности работы колонок CSS и некоторые потенциальные проблемы, которые следует учитывать при использовании колоночного макета в вебе.
Охват колонок
Порой вам может потребоваться разбить некоторый контент на колонки, но затем один элемент link поперек, охватив блоки колонок. Достигнуть этого можно, применив свойство column-span к потомку колоночного контейнера.
В примере ниже, я заставила элемент
охватить колонки. Заметьте, когда вы делаете это, содержимое разбивается на набор полей выше этого элемента, затем начинает новый набор колонок ниже него.Содержимое не перепрыгивает через охватывающий элемент.
На данный момент свойство column-span по умолчанию работает во всех браузерах, кроме Firefox. В нём оно еще разработано и скрыто за флагом
Имейте в виду, что в текущих значениях свойств диапазон значений столбца может быть только все или нет . Вы не можете охватить только некоторые колонки, но можете получить такой результат, комбинируя колоночный макет с другими методами вёрстки.В следующем примере у меня есть Grid-контейнер с двумя столбцами. Левый столбец имеет ширину 2fr, а правый - 1fr. В левом столбце я обернула статью в колоночный контейнер с двумя колонками, также охватывающий элемент.
предоставляется остаётся содержимое, которое входит во второй Grid-столбце. Играя разными доступными нам методами вёрстки, мы можем точно определить, какой из них лучше всего подходит в конкретные ситуации - не бойтесь совмещать их.
Контроль переноса содержимого
Если в колонном контейнере вставляются заголовки, вы наверняка хотели бы избежать ситуаций, в которых они разрываются и часть заголовка или текст под заголовком переносится в следующую колонку.Если у вас есть изображения с подписями, было бы лучше, чтобы и изображение и подпись оставались одним целым, без разрыва между колонками. Специально для таких операций, в CSS есть свойства для управления переносом содержимого.
Разделяя содержимое на колонки, вы выполняете так называемую фрагментацию. То же самое справедливо, если вы разделяете ваш контент между страницами, например, когда создаете стили для печати. Следовательно, колонки ближе к Paged Media, чем к другим методам разметки в вебе.Из-за этого, в течение нескольких лет способом контроля переноса в содержимом было использование свойства page-break- , которое было частью CSS 2.1.
разрыв страницы перед
разрыв страницы после
разрыв страницы внутри
Позже спецификация CSS Fragmentation определила свойства, которые были разработаны для любого фрагментированного контекста, спецификация включает подробности для Paged Media, CSS Columns, и отложенной спецификации Regions; Области также фрагмен непрерывный фрагмент содержимого.Сделать эти общими, их можно применить к любому будущему фрагментированному контексту, так же, как свойства выравнивания из свойств Flexbox были перемещены в той спецификации Box Alignment точно, чтобы их можно было использовать в Grid и Block разметке
break-before
обрыв после
взлом внутри
Как пример, я использовала свойство хлеб внутри: избежать для элемента , чтобы предотвратить отделение подписи от самой картинки.Браузер, поддерживающий это свойство, должен сохранить элемент цельным, даже если колонки при этом будут выглядеть неравномерными. К сожалению, поддержка этих свойств в CSS-столбцах довольно неоднозначна. Но даже там, где они поддерживаются, их следует рассматривать как предложение из-за того, что необходимо делать так много запросов, чтобы контролировать перенос, что браузер, по сути, не может делать перенос в любом месте. Спецификация определяет приоритеты в этом случае, однако для вас это может быть даже более эффективно контролировать наиболее важные ситуации.
Проблема колонок в вебе
Одна из причин, почему это привело к изменению изменения читателя со страницей, вынуждая его прокручивать не вверх-вниз, а в сторону. Согласитесь, это не очень удобно.
Когда вы зафиксируете высоту контейнера, например, используя единицу измерения области просмотра vh, тогда произойдет переполнение в строчном направлении.
Указанная проблема делает использование столбцов CSS в вебе тем, с помощью которых мы должны работать очень осторожно с точки зрения количества размещаемого в нём содержимого.
Колонки, переполняющие блок
Для 2 указанных в спецификации CSS столбцов мы рассматриваем, как включить метод, с помощью которого в данный момент приводят к появлению горизонтальной прокрутки, этого увеличивались в блочном направлении.
Это значит, что вы иметь колоночный контейнер с фиксированной высотой, и как только содержимое может создать колонки, заполняющие этот контейнер, новый набор колонок будет создан ниже.Это было бы в чем-то похоже на наш пример выше охватывающим, однако вместо охвата, это будет переполнение, вызванное контейнером с ограничением в блочном измерении.
Этот функционал сделал бы колонки более полезными в вебе. Хотя мы всё еще далеки от этого, вы всё же можете следить за этой проблемой в репозитории рабочей группы CSS. Если у вас есть дополнительные примеры использования этого функционала, это действительно помогает, когда разрабатывается новый функционал.
Чем мультиколонки полезны сегодня?
С спецификацией не рекомендуется разделять текущее содержимое на колонки без учета проблем с прокруткой. Тем не менее, есть некоторые ситуации, когда колонки идеально подходят. Существует достаточно примеров, достойных рассмотрения, когда вы ищете шаблоны проектирования.
Сокращение небольших элементов интерфейса или текста
Мультиколонки могут быть полезны в любом месте, где имеется небольшой список элементов, который должен занимать меньше пространства.Например, простой список чекбоксов или список имен. Часто в таких ситуациях посетитель не читает до одной колонку, после чего возвращается наверх к началу следующей, а ищет в содержимом чекбокс для использования или ссылку для перехода. Даже если возникнет ситуация с появлением прокрутки, это не должно быть проблемой.
Вы можете видеть пример подобного использования колонок на сайте DonarMuseum
Заранее известное небольшое количество содержимого
Известно, когда при разработке сайта нам заранее известно, какое количество содержимого будет небольшим и поместится на большинстве экранов, не вызывая нежелательной прокрутки.Я использовала колонки на презентации на презентации Notist для введения.
Энди Кларк разработал прекрасный пример для сайта Equfund
Чтобы избежать возникновения прокрутки на очень маленьких экранах, помните, что можете использовать медиа-выражения для проверки высоты области просмотра так же, как и ширины. Если включены колонки только на тех контрольных точках, которые имеют минимальную высоту мин-высота устройств больше достаточной для оборудования, это может спасти пользователей очень маленьких.
Масонство-подобное содержание контента
Другой пример, когда колоночный макет отлично работает - в ситуации, когда вы хотите показать содержимое в стиле Masonry. Колонка в данный момент - это единственный метод разметки, который создает этот тип разметки с элементами разной высоты. CSS Grid не оставит отступ или растянет элемент, чтобы соответствовать строго двухмерной сетке.
У Veerle Pieters есть отличный пример использования колонок для этих целей на её вдохновляющей странице.
Grid и Flexbox фолбеки
Свойства column- также могут быть использованы как фолбек для Grid или Flex макета. Если вы укажете одно из колоночных свойств для контейнера, затем превратите этот контейнер во Flex или Grid макет с помощью display: flex или display: grid любое поведение колонок будет отменено. Если у вас есть, например, карточный макет, который использует CSS Grid, и при этом будет удобочитаемым в нескольких колонках, можно использовать колонки как простой запасной вариант.Браузеры, которые не содержат CSS Grid, получат колоночное отображение, те которые, получат Grid-сетку.
Не забывайте про мультиколонки!
Довольно часто, отвечая на вопросы о выборе между Grid или Flexbox, вместо них я рекомендую мультиколонки. Возможно, вы не будете использовать их на каждом сайте, но когда они столкнутся с подходящей подходящей. На MDN присутствуют полезные ресурсы по CSS-столбцам и имеются с ними свойства фрагментации.
. Если вы используете колонки в своем проекте, возможно, вам стоит оставить упоминание об этом в комментариях, чтобы поделиться другими способами использования этого функционала
.
столбцов | CSS | WebReference
альное свойство, которое позволяет одновременно задать ширину и количество колонок многоколоночного текста.
Краткая информация
Значение по умолчанию
авто
Наследуется
Нет
Применяется
К блочным элементам (кроме таблиц), ячейкам и элементам, у которых установлен дисплей как inline-block
Анимируется
Да
Обозначения
Описание
Пример
<тип>
Указывает тип значения.
<размер>
A && B
Значения должны выводиться в указанном порядке.
<размер> && <цвет>
A | B
Указывает, что надо выбрать только одно значение из предложенных (A или B).
нормальный | малые шапки
A || B
Каждое Сообщение заведомо самостоятельно или с другими в произвольном порядке.
ширина || count
[]
Группирует значения.
[урожай || крест]
*
Повторять ноль или больше раз.
[, <время>] *
+
Повторять один или больше раз.
<число> +
?
Указанный тип, слово или группа не является обязательным.
вставка?
{A, B}
Повторять не менее A, но не более B раз.
<радиус> {1,4}
#
Повторять один или больше раз через запятую.
<время> #
Значения
Комбинация Свойства ширина столбца и количество столбцов. Порядок значения не имеет.
Пример
Ширина колонок 200 пикселей, количество задаётся браузером.
столбца: 200 пикселей автоматически;
Три колонки минимальной ширины 12em каждую.
столбца: 3 12em;
Две колонки, их ширина определяется браузером.
столбцов: 2;
Объектная модель
Объект .style.columns
Примечание
Firefox до версии 52 поддерживает свойство -moz-columns.
Safari до версии 9, Chrome до версии 50 и Android до версии 80 свойство -webkit-columns.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Рекомендация (Рекомендация) - спецификация W3C и одобана как стандарт.
Кандидат в рекомендации (Возможная рекомендация) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Предлагаемая рекомендация (Предлагаемая рекомендация) - на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
Рабочий проект (Рабочий проект) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Черновик редакции (Редакторский черновик) - черновая версия стандарта после внесения правок редакторами проекта.
Эскиз (Черновик спецификации) - первая черновая версия стандарта.
Браузеры
В таблице браузеров используются следующие обозначения.
- свойство полностью предоставленным браузером со всеми допустимыми значениями;
- свойство браузером не воспринимается и игнорируется;
- при работе возможно появление различных ошибок, либо свойство имеется лишь частично, например, не все допустимые значения имеют свойство не ко всем элементам, которые указаны в спецификации.
Число указывает версию, начиная с свойства, имеющего свойство.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.02.2020
Редакторы: Влад Мержевич
.
Введение в CSS3 Multicolumn. Работаем с колонками / Блог компании Microsoft / Хабр
Как расположить текст на странице в нескольких колонок? И можно ли это делать автоматически? Наверняка, кто занимается раньше веб-разработкой, сталкивались с такими задачами - и часто упирались в сложные решения, требующие хитрых стилей, либо использования дополнительных библиотек на JavaScript (например, плагин Columnizer для jQuery).
Многоколоночная верстка контента (не путать с соблюдением многоколоночной верстки страницы, которая скорее к проблеме расположения блоков по сетке) Многоколоночная верстка качества Рекомендация кандидата в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версий (IE10 +), причем сразу без префиксов.
Замечание В случае Internet Explorer 10 это автоматически означает возможность использования CSS3 с несколькими столбцами при разработке приложений в стиле Metro для Windows 8 с использованием HTML / CSS / JS.
В статье я не буду использовать браузерные префиксы, чтобы на запутывать код, но при этом использовании не забудьте добавить поддержку префиксов для Firefox, Safari и Chrome.
Сразу отмечу еще две немаловажные детали. Во-первых, в большинстве случаев применения многоколоночной верстки для текста можно рассматривать развитие контента сайта по пути Progressive Enhancement, в котором пользователи более современных сайтов будут получать больше плюшек:
Во-втором, многоколоночное хорошо сочетается с возможностями системы Медиа-запросы (и идеями отзывчивого дизайна, адаптивный дизайн), например, при разных размерах экрана, можно форматировать текст в разное количество колонок:
И последнее, что я хотел бы отметить во введении, чтобы не останавливаться далее и со спокойной совестью перейти к техническим требованиям: при использовании многоколоночной верстки текста надо помнить, что подобное предположение предполагает и определенный порядок чтения (для европейских языков слева направо).Поэтому важно, чтобы для перевода взгляда было необходимо сделать как можно меньше дополнительных действий, особенно это касается вертикального скроллов:
В этом смысле горизонтальная природа колонок лучше сочетается с горизонтальным скроллом (как это используется во многих приложениях) для Win8 - например, это хорошо видно по приложению USA Today):
В общем, колонки - это прекрасно, но не забывайте об удобстве пользователей.А теперь в бой!
Колонки
Итак, у нас есть текст (контент), который мы хотим связать в несколько колонок. С чего начать?
Чтобы превратить такой элемент в многоколоночный элемент через стили в CSS, выставить одно из свойств: column-width или column-count в значение, отличное от auto . Например, чтобы разбить текст на две колонки, достаточно сделать так:
article {
количество столбцов: 2;
}
Все остальное сделает браузер:
Альтернативное свойство - column-width - установить оптимальную ширину колонок:
article {
ширина столбца: 150 пикселей;
}
При этом браузере сам разбивает контент на нужное количество колонок, чтобы заполнить внешний контейнер, подстраиваясь под указанную ширину колонок.Важный момент заключается в том, что реальная ширина может отличаться от заданной в большую или меньшую сторону: на картинке выше серая полоска имеет размер увеличенной ширины в 150px - и, как видно, она меньше, чем реальная ширина колонки.
Такое поведение определено спецификацией и позволяет (автоматически) добиться большей гибкости при разработке адаптивной разметки:
Например, если вы задали колонки шириной 45 пикселей, то браузер посчитает, что влезет только две колонки, а заполнить все место, увеличит размер каждой до 50px.
В определенном смысле можно рассматривать как альтернативу с помощью медиа-запросов разного количества колонок в зависимости от размера окна и с автоматическим рассчетом ширины колонок:
@media (min-width: 400px) {
статья {
количество столбцов: 2;
}
}
@media (min-width: 600 пикселей) {
статья {
количество столбцов: 3;
}
}
...
Я второй раз говорю про альтернативу - и вот почему.
количество в зависимости от ширины
Как уже должно быть понятно из описания выше, спецификация дает два способа задания количества и ширины колонок (кстати, у всех колонок она одинаковая!):
column-count позволяет указать число колонок, на которые нужно поделить контент, при этом ширину колонок определяет браузер с учетом доступного пространства.
ширина колонки заходит с обратной стороны: указывает, какими примерно должны быть колонки, однако, оставляет рассчет их количества на усмотрение.
В большинстве случаев вы будете использовать либо одно, либо другое, оперируя соответственно числами, либо длину. Для упрощения записи есть такое короткое свойство columns , реагирующее на формат указываемых данных:
columns: 12em; / * ширина столбца: 12em; количество столбцов: авто; * /
столбцы: 2; / * ширина столбца: авто; количество столбцов: 2; * /
колонки: авто; / * ширина столбца: авто; количество столбцов: авто; * /
колонки: авто 12em; / * ширина столбца: 12em; количество столбцов: авто; * /
колонки: 2 авто; / * ширина столбца: авто; количество столбцов: 2; * /
Что будет, если указать и количество колонок, и оптимальную ширину? Согласно спецификации, в этом случае количество колонок максимальное количество колонок:
артикул {количество
столбцы: 150 пикселей 3; / * ширина столбца: 150 пикселей; количество столбцов: 3; * /
}
В описании вы также найдете псевдо-код, описывающий алгоритм рассчета количества колонок и их ширины.
Отступы и разделительные линии
Теперь, когда мы научились создавать колонки, самое время научиться управлять тем, что происходит между ними: отступами и разделительными линиями.
Чтобы изменить отступ между колонками, определено свойство column-gap . Чтобы визуально обозначить раздел между колонками, введено еще одно свойство - column-rule- * :
column-gap
column-gap позволяет указать ширину пространства между колонками.Свойство принимает в качестве значения длины, либо определяемое браузером значение normal (спецификация рекомендует использовать 1em), являющееся также значение по умолчанию:
article {
столбцы: 3;
столбец-пробел: 3em;
}
Важно учитывать, что размер отступа между колонками используется при расчете ширины колонок и их количества. Например, если указано только количество колонок (как в примере выше), то ширина рассчитывается так:
W = ((доступная ширина + зазор столбца) / N) - зазор столбца;
линейка-столбец
Если для обозначения колонок свободного пространства недостаточно, можно использовать свойства column-rule- * , добавляющие линию между колонками.По своему поведению и заданию аналогичные свойстваам border- * :
column-rule-color - цвет линии,
столбец-линейка-стиль - стиль линии,
column-rule-width - ширина линии.
Как и в случае с границами блоков, есть краткая форма записи - просто column-rule :
Важный момент: разделительная линия отрисовывается ровно посередине отступа между колонками, при этом не занимая место.Если вдруг разделительная линия оказывается больше по ширине, она начинает пересекаться с контентом:
Причем отрисовывается разделитель сразу после фона (фона) контейнера.
Разрывы
Распределение контента по колонкам - еще одна интересная задача, требующая иногда тонкого управления. По умолчанию, контент - это сплошная «масса», весьма прямолинейным образом, перетекающая из одной колонки в другую.Но что делать, если, скажем, я хочу быть уверенным, что в конце колонки у меня не повиснет одинокий заголовок? Или мое визуально-эстетическое чувство требует, чтобы цитата не разрывалась на несколько колонок или даже больше: единолично занимала целиком всю колонку?
Для решения всех этих задач есть специальные свойства. Знакомьтесь:
перед - что должно происходить перед блоком контента,
, прорыв после - что должно происходить после блока контента,
Взлом - что должно происходить внутри блока контента.
Если вы знакомы с аналогичными свойствами, отвечающими за разбивку контента на страницы ( page-break- * ), то данные свойства для колонок ведут себя схожим образом: используйте те же значения плюс несколько (отмечены курсивом):
взлом внутри : автоматически, избежать, избежать-страницы , избежать-столбец
Думаю, из названий значений, в основном, должен быть понятен смысл действий.Например, в описанном предположении избежать появления разрывов внутри диалога и одновременно указать его в отдельной колонке, мне достаточно указать:
Важный момент: на сегодня управление разрывами в колонках поддерживается только в Opera 11.10+, что не удивительно, учитывая, что редактор спецификации Хокон Виум Ли, - и IE10.
Мои эксперименты со свежей версей версией IE10 показывают, что местами версией друг реализации от друга. Однако при этом я затрудняюсь ответить, какой браузер ведет «правильный», так как спецификация хотя и содержит отдельный раздел, посвященный переполнению (переполнение), все же оставляет некоторые нюансы на усмотрение (например, позволяет появление дополнительных колонок при явном указании разрывов) ).
Растягивание на несколько колонок
Теперь, когда мы научились создавать колонки и немного управлять поведением, давайте научимся еще одному трюку - растягиванию контента на несколько колонок.Для этого есть специальное свойство: column-span , принимающие значения нет и все .
Нас интересует второе значение. Оно выдергивает содержимое из общего многоколоночного потока и растягивает его на все колонки. При этом контент до этого элемента и контент после автоматически балансируются на все основные колонки.
article dialog.big {
диапазон столбцов: все;
дисплей: блок;
размер шрифта: 1.3em;
маржа: 20px 0;
}
В данном случае написанная большая фраза из диалога растянута на все колонки.Обратите внимание на порядок следования текста: верхняя левая колонка, верхняя правая, фраза диалога, нижняя левая и далее нижняя правая.
Кстати, важный нюанс: если высота колонок ограничена, и дополнительных места под растягивание элементов нет, браузер может вполне легально игнорировать требование растягивания.
Растягивание элементов на сегодня все еще не поддерживается в Firefox.
Заполнение
И последняя деталь, которая вы, наверняка, уже должна была озадачиться: а как, собственно говоря, браузер решает, как ему заполнять колонки?
Для ответа на этот вопрос спецификация вводит свойство column-fill .Заполнять можно сбалансированно ( balance ), - именно так делается по умолчанию, - стараясь выдержать одинаковую высоту колонок; либо автоматически ( auto ), заполняя колонки последовательно.
Управление заполнением на сегодня только Internet Explorer и Opera.
Итоги
Прежде всего, продолжение повести А.П. Чехова «За яблочки» можно найти в Викитеке.
. Я надеюсь, вы с не меньшим вдохновением смотрите на открывающиеся перед веб-разработчиками возможности. Адаптивные, гибкие и мощные средства управления размещением контента все ближе и доступнее. А решение сложных задач - все проще.
Интерактив
Поиграться с работой CSS3 Multi-column можно на ietestdrive.com:
Пробуйте, эксперементируйте. Сообщайте разработчикам браузеров о багах. И не забывайте продумать, что увидят пользователи старых (и вроде бы современных, но все еще не полностью поддерживающих стандартных браузеров) - например, можно использовать плагин для jQuery Columnizer. Помните об адаптивности и зрителей маленьких и больших экранов.
.
Свойство columns | Справочник CSS
CSS свойства
Определение и применение
CSS свойство columns позволяет указать в одном объявлении значения свойства column-width (оптимальная ширина колонок) и column-count (оптимальное количество колонок).
Поддержка браузерами
CSS синтаксис:
столбцы: "авто | ширина столбца счетчик столбцов | начальный | наследование";
Если указано значение как целое число, то оно относится к значению свойств column-count,
если указано в единицах измерения длины CSS (px, мм, pt, и т.п.), то к ширине столбца.
Допускается указывать как одно, так и два значения в одном объявлении.
столбцы: "авто" / * ширина столбца: авто; количество столбцов: авто * /
столбцы: "авто авто" / * ширина столбца: авто; количество столбцов: авто * /
синтаксис JavaScript:
object.style.columns = "авто авто"
Значения свойства
Значение
Описание
auto
Указывает, что значения свойств ширина столбца и количество столбцов устанавливаются в значении auto (ширина колонок и их количество определяется браузером автоматически - означает, что элемент не является многоколоночным). Значение по умолчанию авто авто.
ширина колонны
Задает оптимальную ширину для колонок. Ширина колонки может быть шире при наличии свободного места, или уже в случае если указанное значение больше возможной ширины колонки. Значение указывается в единицах измерения CSS (px, мм, pt, и т.п.). Значение должно быть строго положительным. Обращаю Ваше внимание, что в настоящее время значения позволяет в процентах не допускаются. Значение по умолчанию авто.
кол-во колонок
Задает оптимальное количество колонок. Значение указывается как целое число. Значение по умолчанию авто.
начальный
Устанавливается свойство в значение по умолчанию.
наследуется
Указывает, что наследуется от родительского элемента.
Версия УСС
CSS3
Наследуется
Нет.
Анимируемое
Да.
Пример использования
Пример использования свойств columns
<стиль>
.container {
-webkit-columns: 150px 3; / * для поддержки ранних версий браузеров * /
-moz-columns: 150px 3; / * для поддержки ранних версий браузеров * /
столбцы: 150 пикселей 3; / * указываем оптимальную ширину и количество колонок на которое необходимо разбить элемент * /
}
Этот гигантский грызун представляет собой жирного зверька с продолговатым телом,
покрытым жёсткой лохматой шерстью пёстрой коричневой расцветки.Передние лапы у капибары длиннее задних,
массивный огузок не имеет хвоста, и поэтому у нее всегда такой вид, она вот-вот собирается сесть.
У нее крупные лапы с широкими перепончатыми пальцами, а когти на передних лапах, короткие тупые, удивительно напоминают миниатюрные копыта.
У нее весьма аристократический: ее плоская широкая голова и тупая, почти квадратная морда благодушно-покровительственное выражение,
придающее ей сходство с задумчивым львом. По земле капибара передвигается характерной шаркающей походкой или скачет вразвалку галопом,
в воде же плавает и ныряет с поразительной лёгкостью и проворством.Капибара - флегматичный добродушный вегетарианец, лишенный ярких индивидуальных черт, присущих его сородичам,
но этот недостаток восполняется у нее спокойным и дружелюбным нравом.
Пример использования свойств columns (указать позволяет в одном объявлении значений свойств column-count и column-width) .CSS свойства .
Несколько примеров, как вывести текст в две колонки одинаковой ширины и отступом между ними.