2.24. CSS3 колонки

Опубликовано: 26 июня 2015 Обновлено: 11 февраля 2022 21 комментарий

Модуль CSS3 columns описывает многоколоночный макет, который позволяет организовать содержимое так, чтобы оно занимало несколько вертикальных контейнеров, подобно газете или журналу.

Колонки могут содержать заголовки, текст, таблицы, картинки и любые другие inline-элементы.

Многоколоночная модель

Поддержка браузерами

IE: 10
Edge: 12
Firefox: 52, 2 -moz
Chrome: 50, 4 -webkit-
Safari: 9, 3.1 -webkit-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5, 4 -webkit-

The old post

15 Most Charming Small Towns In England

1. Berwick-upon-Tweed

Berwick was founded as an Anglo-Saxon settlement during the time of the Kingdom of Northumbria, which was annexed by England in the 10th century. The area was for more than 400 years central to historic border wars between the Kingdoms of England and Scotland, and several times possession of Berwick changed hands between the two kingdoms. The last time it changed hands was when Richard of Gloucester retook it for England in 1482. To this day many Berwickers feel a close affinity to Scotland.

Nowadays Berwick-upon-Tweed is much-visited for its highly visible history: medieval town walls, Elizabethan ramparts, 13th century castle ruins, its 17th century ‘Old Bridge’, town hall, Britain’s earliest army barracks, England’s northernmost hotel, amongst others.

2. Rye

Ancient Rye is all cobbled streets and tumbledown rows of houses by the sea. Originally part of the Cinque Ports Confederation, five strategic towns important for trade and military purposes in medieval times, today Rye is practically a living museum. Rye Castle, popularly known as Ypres Tower, was built in 1249 by Henry III to protect against frequent raids by the French; even older, the Norman-era St. Mary’s Church looks over the town. Rye is also just a few minutes away from one of England’s most famous beaches, Camber Sands, a two-mile-long playground for kitesurfers and beachlovers.

Фигура 1. Пример многоколоночной разметки

1. Количество и ширина колонок

Определение количества и ширины колонок является основополагающим при построении многоколоночного макета. Свойства column-count и column-width используются для установки количества и ширины колонок.

Третье свойство, columns, является сокращенным свойством, которое устанавливает ширину и количество колонок одновременно.

Другие факторы, такие как явные разрывы столбцов, содержимое и ограничения высоты, могут влиять на фактическое количество и ширину колонок.

1.1. Ширина колонок: свойство column-width

Свойство column-width указывает минимальную ширину, которую должен занимать каждый столбец.

Свойство не наследуется.

column-width
Значения:
auto Означает, что ширина столбца будет определяться другими свойствами (например, column-count, если оно имеет значение, отличное от auto). Значение по умолчанию.
длина Ширина колонок задаётся в единицах длины, кроме %. Фактическая ширина столбца может быть больше (для заполнения доступного пространства) или уже (только если доступное пространство меньше указанной ширины столбца). Отрицательные значения не допускаются. Используемые значения будут ограничены минимум 1px.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

column-width: auto;
column-width: 100px;
column-width: 10em;
column-width: 3.3vw;
column-width: inherit;
column-width: initial;

1.2. Количество колонок: свойство column-count

Свойство column-count описывает количество колонок, а их ширина будет рассчитываться, исходя из ширины доступного пространства. Если одновременно с column-count задается column-width, то значение column-count будет считаться максимальным числом колонок.

Свойство не наследуется.

column-count
Значения:
auto Означает, что количество столбцов будет определяться другим свойством, например, column-width, если оно также не имеет значение auto. Значение по умолчанию.
число Описывает максимальное количество колонок. Значение задаётся целым числом, должно быть больше 0.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

column-count: auto;
column-count: 2;
column-count: inherit;
column-count: initial;

1.3. Установка колонок с помощью одного свойства columns

Свойство columns — это сокращенное свойство для установки column-width и column-count. Опущенные значения устанавливаются в их начальные значения.

Свойство не наследуется.

Синтаксис

columns: 12em;      /* column-width: 12em; column-count: auto */
columns: auto 12em; /* column-width: 12em; column-count: auto */
columns: 2;         /* column-width: auto; column-count: 2 */
columns: 2 auto;    /* column-width: auto; column-count: 2 */
columns: auto;      /* column-width: auto; column-count: auto */
columns: auto auto; /* column-width: auto; column-count: auto */
columns: inherit;
columns: initial;

2. Промежутки между колонками и разделительные линии

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

Разделительная линии рисуется в середине промежутка между колонками, не занимая места. То есть наличие или толщина разделительной линии не изменит размещение чего-либо еще.

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

2.1. Промежутки между колонками: свойство column-gap

Свойство column-gap определяет разрыв между колонками. Если для колонок установлена разделительная линия с помощью свойства column-rule, то эта линия будет расположена посередине промежутка, а ее ширина не изменит общую ширину.

Свойство не наследуется.

column-gap
Значения:
длина Промежуток между колонками задается в единицах длины. Значения не могут быть отрицательными. Процентное значение может быть удалено из спецификации.
normal Эквивалентно 1em. Значение по умолчанию.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

column-gap: normal; 
column-gap: 3px;
column-gap: 2.5em;
column-gap: 3%;
column-gap: inherit;
column-gap: initial;

2.2. Цвет разделительной линии: свойство column-rule-color

Свойство column-rule-color определяет цвет разделительной линии.

Свойство не наследуется.

column-rule-color
Значения:
цвет Цвет линии задается с помощью допустимых значений цвета. Значение по умолчанию currentColor.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

column-rule-color: pink;
column-rule-color: #D71C3B;
column-rule-color: rgb(192, 56, 78);
column-rule-color: transparent;
column-rule-color: hsla(0, 100%, 50%, 0.6);
column-rule-color: inherit;
column-rule-color: initial;

2.3. Стиль разделительной линии: свойство column-rule-style

Свойство column-rule-style устанавливает стиль разделительной линии.

Свойство не наследуется.

column-rule-style
Значения:
none Значение вычисляется в 0. Значение по умолчанию.
hidden Аналогично со значением none, линия скрыта.
dotted Отображает линию набором квадратных точек.
dashed Отображает линию как последовательность из тире.
solid Обычная линия.
double Отображает разделительную линию в виде двух параллельных тонких линий, расположенных на некотором расстоянии между собой. Толщина разделительной линии не указывается, но сумма линий и промежутка между ними равна значению column-rule-width.
groove Отображает линию объемной, вдавленной в полотно. Это достигается путем создания тени из двух цветов, один из которых темнее, другой — светлее.
ridge Отображает разделительную линию объемной, т.е. эффект, противоположный groove.
inset Отображает сплошную линию цветом темнее, чем заданный цвет линии.
outset Отображает сплошную линию цветом, заданным свойством column-rule-color.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;
column-rule-style: inherit;
column-rule-style: initial;

2.4. Ширина разделительной линии: свойство column-rule-width

Свойство column-rule-width устанавливает ширину разделительной линии. Отрицательные значения не допускаются. Не работает без свойства column-rule-style.

Свойство не наследуется.

column-rule-width
Значения:
thin Тонкая линия.
medium Значение по умолчанию. Средняя толщина линии.
thick Утолщенная линия.
длина Ширина разделительной линии задается в единицах длины.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

column-rule-width: thin;
column-rule-width: medium;
column-rule-width: thick;
column-rule-width: 1px;
column-rule-width: 2.5em;
column-rule-width: inherit;
column-rule-width: initial;

2.5. Краткая запись свойств разделительной линии: свойство column-rule

Свойство column-rule является сокращенной записью свойств column-rule-width column-rule-style column-rule-color.

Свойство не наследуется.

Синтаксис

column-rule: dotted;
column-rule: solid 8px;
column-rule: solid blue;
column-rule: thick inset blue;
column-rule: inherit;
column-rule: initial;

3. Разрыв колонок

Когда содержимое размещено в нескольких колонках, браузер должен определить, где размещаются разрывы колонок. Проблема разбиение контента на колонки аналогична разбиению контента на страницы. Для решения этого вопроса было введено три новых свойства, позволяющих описывать разрывы столбцов в тех же свойствах, что и разрывы страниц: break-before, break-after и break-inside.

4. Охват колонок: свойство column-span

Свойство column-span позволяет элементу охватывать несколько столбцов. Указывается не для блока-контейнера, а для для конкретного элемента внутри, например, для заголовка.

В будущем будет возможно указать количество колонок для охвата, подобно атрибуту colspan, который может быть применен к ячейке таблицы, но в спецификации CSS3 есть только два возможных значения: none и all.

Свойство не работает по умолчанию в Firefox. Пользователь должен явно включить функцию, в layout.css.column-span.enabled должно быть установлено значение true. Чтобы изменить настройки в Firefox, зайдите в about:config.

Свойство не наследуется.

column-span
Значения:
none Содержимое элемента отображается в пределах одной колонки. Значение по умолчанию.
all Элемент охватывает все колонки. Колонка разбивается в том месте, где отображается элемент.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

column-span: none;
column-span: all;
column-span: inherit;
column-span: initial;

5. Заполнение колонок содержимым: свойство column-fill

Свойство column-fill контролирует заполнение колонок содержимым. Существует две стратегии заполнения колонок: колонки могут быть выровнены по высоте или нет. Если колонки выровнены, браузеры должны попытаться минимизировать изменения высоты колонки, учитывая при этом вынужденные разрывы, widows, orphans и другие свойства, которые могут влиять на высоту колонок. Если колонки не выровнены, они заполняются последовательно, некоторые из них могут быть частично заполнены или вообще не заполнены.

Свойство не наследуется.

column-fill
Значения:
auto Заполняет колонки последовательно.
balance Отображает содержимое одинаково во всех колонках. Значение по умолчанию.
balance-all Выравнивает содержимое равномерно между колонками, насколько это возможно.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

column-fill: auto;
column-fill: balance;
column-fill: balance-all;
column-fill: inherit;
column-fill: initial;

6. Переполнение

6.1. Переполнение внутри многоколоночных контейнеров

За исключением случаев, когда это может привести к разрыву колонки, содержимое, которое выходит за границы колонки, выходит за ее границы и не обрезается. Это касается, в первую очередь, изображений. Чтобы решить эту проблему, нужно установить для изображений следующие свойства:

img {
  display: block;    /*убираем нижний отступ под картинкой*/
  width: 100%;       /*растягиваем изображение на всю ширину блока-контейнера*/
}

6.2. Разбивка на страницы и переполнение вне многоколоночных контейнеров

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

Многоколоночный контейнер может иметь больше колонок, чем у него есть для этого места из-за ограничения высоты колонок (например, с помощью height или max-height) и явных разрывов колонок. В этом случае дополнительные колонки создаются в направлении строки, перемещаясь на следующие страницы.

По материалам CSS Multi-column Layout Module Level 1

CSS3 flexbox
CSS3 3D-трансформации

Поделиться: