Укажите минимальную ширину для каждого столбца и максимальное количество столбцов:
div
{
columns: 100px 3;
}
Попробуйте сами »
Определение columns
CSS свойство columns - это сокращенное свойство для:
Часть column-width определит минимальную ширину для каждого столбца, в то время как часть column-count определит максимальное количество столбцов. Используя это свойство, multi-column автоматически разбивается на один столбец при узкой ширине браузера, без необходимости в медиа-запросах или других правилах.
| Значение по умолчанию: | auto auto |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes, просмотр отдельных свойств. Читайте о animatable Попробуй |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.columns="100px 3" Попробуй |
Поддержка columns
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit- или -moz - указывают первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| columns | 50.0 4.0-webkit- |
10.0 | 52.0 9.0-moz- |
9.0 3.1-webkit- |
37.0 15.0-webkit- 11.1 |
Синтаксис columns
columns: auto|column-width column-count|initial|inherit;
Значения columns
| Значение | Описание | Демонстрация |
|---|---|---|
| auto | Значение по умолчанию. Устанавливает как ширину столбца, так и количество столбцов на "авто" | Демо ❯ |
| column-width | Определяет минимальную ширину для каждого столбца | Демо ❯ |
| column-count | Определяет максимальное количество столбцов | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры columns
Укажите промежуток в 40 пикселей между столбцами:
div
{
column-gap: 40px;
}
Попробуйте сами »
Укажите ширину, стиль и цвет правила между столбцами:
div
{
column-rule: 4px double #ff00ff;
}
Попробуйте сами »
Страницы по теме columns
CSS Учебник: CSS Несколько столбцов
HTML DOM справочник: columns свойство