Руководство по многоколоночным макетам в CSS3

В CSS3 появился модуль многоколоночной разметки для создания нескольких разметок колонок простым и эффективным способом. Теперь вы можете создавать макеты, похожие на журнальную или газетную разметку, не используя свойство float. Вот простой пример разделения некоторого текста на три столбца с помощью функции многостолбцовой разметки CSS3.

p {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
       -moz-column-count: 3; /* Firefox */
            column-count: 3; /* Standard syntax */
}

Настройка количества столбцов и ширины

Свойство column-count устанавливает количество столбцов внутри многоколоночного элемента, тогда как свойство column-width устанавливает желаемую ширину столбцов.

p {
    -webkit-column-width: 150px; /* Chrome, Safari, Opera */
       -moz-column-width: 150px; /* Firefox */
            column-width: 150px; /* Standard syntax */
}

Настройка пространства между колонками

Вы можете контролировать расстояние между столбцами, используя свойство column-gap. Расстояние по умолчанию установлено normal, что эквивалентно 1em.

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
}

Настройка правил столбца

Вы также можете добавить строку между столбцами, используя свойство column-rule. Это короткое свойство для задания ширины, стиля и цвета в одном свойстве. Свойство column-rule принимает те же значения, что и border и outline.

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule: 2px solid red;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule: 2px solid red;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
    column-rule: 2px solid red;
}

CSS3-свойства Multiple Columns

В следующей таблице приведен краткий обзор всех свойств нескольких столбцов: