Макеты из нескольких столбцов в CSS3

  1. Статьи
  2. Верстка сайта
  3. CSS
0 ∞

Макет CSS с несколькими столбцами использует новые свойства CSS, которые позволяют дизайнерам разбивать макет на блоки. Два основных свойства, которые задают количество столбцов - это column-count и column-width.

Содержание

Используемые свойства

  • column-width;
  • column-count;
  • column-gap;
  • column-rule;
  • column-rule-width;
  • column-rule-style;
  • column-rule-color;
  • column-span;
  • column-fill;
  • columns.

Возможные сложности

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

Примечание: Чтобы быть уверенным, что несколько столбцов будут отображаться корректно, каждое свойство должно быть прописано три раза: с префиксом -moz, с префиксом -webkit и без префикса.

Селекторы CSS3

Синтаксис

Вот некоторые примеры того, как можно использовать данные свойства:

Вот, как использовать column-count:

<style>
.columns2 {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
</style>
</head>
<body>
<div class="columns2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu augue orci. Morbi tristique a felis et varius. Sed augue nunc, cursus sed congue sit amet, mollis sed risus. Aliquam sit amet fringilla nisl. Vivamus ullamcorper odio magna, ut sagittis justo accumsan at. Donec turpis turpis, sagittis vel nisl eget, sodales ullamcorper eros. Etiam ut velit non sapien tincidunt ultrices in et nisi. </div>

Вы можете использовать свойство column-width, чтобы установить наименьшую ширину столбца. Если вы не зададите свойство column-count, браузер автоматически создаст столько столбцов, сколько необходимо, чтобы это количество соответствовало ширине.

Вот код:

<style>
.columns2 {
    -webkit-column-width:20em; /* Chrome, Safari, Opera */
    -moz-column-width:20em; /* Firefox */
    column-width:20em;
}
</style>
</head>
<body>
<div class="columns2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu augue orci. Morbi tristique a felis et varius. Sed augue nunc, cursus sed congue sit amet, mollis sed risus. Aliquam sit amet fringilla nisl. Vivamus ullamcorper odio magna, ut sagittis justo accumsan at. Donec turpis turpis, sagittis vel nisl eget, sodales ullamcorper eros. Etiam ut velit non sapien tincidunt ultrices in et nisi.
</div>
Конические градиенты в CSS3

Пример, в котором используются свойства column-count, column-gap и column-rule:

<style>
.columns3 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 50px; /* Chrome, Safari, Opera */
    -moz-column-gap: 50px; /* Firefox */
    column-gap: 50px;
    -webkit-column-rule: 15px outset #00ffff; /* Chrome, Safari, Opera */
    -moz-column-rule: 15px outset #00ffff; /* Firefox */
    column-rule: 15px outset #00ffff;
}
</style>
</head>
<body>
<div class="columns3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu augue orci. Morbi tristique a felis et varius. Sed augue nunc, cursus sed congue sit amet, mollis sed risus. Aliquam sit amet fringilla nisl. Vivamus ullamcorper odio magna, ut sagittis justo accumsan at. Donec turpis turpis, sagittis vel nisl eget, sodales ullamcorper eros. Etiam ut velit non sapien tincidunt ultrices in et nisi. Phasellus fringilla quam rutrum, semper neque pretium, fermentum justo. Suspendisse convallis, purus vitae mollis semper, est justo pretium neque, sit amet convallis nisi justo vel justo. Integer vestibulum, felis vel ultricies ornare, diam risus viverra odio, at tempus elit tellus quis purus. Sed porta, eros vel vehicula sollicitudin, nisi orci maximus magna, vitae commodo dui magna nec libero.
</div>
Синтаксис

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

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

Вадим Дворниковавтор-переводчик статьи «CSS3 Multi-column Layouts»