2.23. CSS3 columns

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

Создание многоколоночной разметки с помощью модели CSS3 columns

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

IE: 10.0
Firefox: 9.0 -moz-
Chrome: 4.0 -webkit-
Safari: 3.0 -webkit-
Opera: 11.1, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: 8
Android Browser: 2.1 -webkit-
Chrome for Android: 44 -webkit-

1. Количество колонок column-count

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

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

Синтаксис

section {
-webkit-column-count: 3; 
-moz-column-count: 3; 
column-count: 3;
}
column-count
Рис. 1. Пример многоколоночной разметки

2. Ширина колонок column-width

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

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

Синтаксис

section {
-webkit-column-width: 100px; 
-moz-column-width: 100px; 
column-width: 100px;
}

3. Ширина пустого пространства между колонками column-gap

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

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

Синтаксис

section {
-webkit-column-gap: 40px; 
-moz-column-gap: 40px;
column-gap: 40px;
}
column-gap
Рис. 2. Промежутки между колонками

4. Позиционирование элемента на несколько колонок column-span

Свойство задаёт количество колонок, которое пересечет выбранный элемент. Указывается не для блока-контейнера, а для для конкретного элемента внутри, например, для заголовка.

Если нужно, чтобы изображение растянулось на все колонки, задаётся img {display: block; -webkit-column-span: all; column-span: all;}. Свойство не наследуется.

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

Синтаксис

h1 {
-webkit-column-span: all; 
column-span: all;
}
column-span
Рис. 3. Позиционирование заголовка на все колонки

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

Свойство создаёт внутри пустого пространства между колонками вертикальную полосу — разделительную линию. Если не задан цвет линии, то некоторые эффекты не будут отображаться. Не наследуется.

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

Синтаксис

section {
-webkit-column-rule-style: dotted; 
-moz-column-rule-style: dotted; 
column-rule-style: dotted;
}
column-rule-style
Рис. 4. Стиль разделительной линии

6. Ширина разделительной линии column-rule-width

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

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

Синтаксис

section {
-webkit-column-rule-style: dotted; 
-moz-column-rule-style: dotted; 
column-rule-style: dotted;
-webkit-column-rule-width: 10px; 
-moz-column-rule-width: 10px; 
column-rule-width: 10px;
}
column-rule-width
Рис. 5. Ширина разделительной линии

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

Свойство позволяет изменить цвет разделительной линии, которая наследует цвет текста. Не наследуется.

column-rule-color
Значения:
цвет Цвет линии можно задать с помощью различных способов: HEX, RGB, RGBA, HSL, HSLA, а также с помощью 140 кроссбраузерных названий цветов.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

section {
-webkit-column-rule-style: dotted; 
-webkit-column-rule-width: 5px; 
-webkit-column-rule-color: #59ACE7; 
-moz-column-rule-style: dotted; 
-moz-column-rule-width: 5px; 
-moz-column-rule-color: #59ACE7; 
column-rule-style: dotted;
column-rule-width: 5px;
column-rule-color: #59ACE7;
}
column-rule
Рис. 6. Цвет разделительной линии

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

Свойство позволяет задать в одном объявлении три свойства разделительной линии — ширину column-rule-width, стиль column-rule-style и цвет column-rule-color. Не наследуется.

column-rule
Значения:
ширина разделительной линии Значение по умолчанию medium.
стиль разделительной линии Значение по умолчанию none.
цвет разделительной линии По умолчанию принимает цвет элемента.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

section {
-webkit-column-rule: 5px dotted #59ACE7; 
-moz-column-rule: 5px dotted #59ACE7; 
column-rule: 5px dotted #59ACE7;
}

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

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

column-rule
Значения:
auto Значение по умолчанию, ширина и количество принимают значение auto.
ширина колонок Значение по умолчанию auto.
количество колонок Значение по умолчанию auto.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

section {
-webkit-columns: 100px 3; 
-moz-columns: 100px 3; 
columns: 100px 3;
}

Поделиться: