column-count

На сколько колонок разбить контент: на две, три или десять?

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Как пишется

Скопировано

Можно указать одно целое положительное число, означающее количество колонок.

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

3 колонки:

        
          
          p {  column-count: 3;}
          p {
  column-count: 3;
}

        
        
          
        
      

Пусть браузер посчитает сам, зная ширину колонки:

        
          
          p {  column-count: auto;  column-width: 250px;}
          p {
  column-count: auto;
  column-width: 250px;
}

        
        
          
        
      

Как понять

Скопировано

Если мы указываем только column-count, браузер думает: «Я разделю этот контент на столько-то колонок во что бы то ни стало».

Если мы указываем одновременно column-count и column-width, например column-count: 4; и column-width: 250px;, то браузер думает так:

  • Если в элемент влезут 4 колонки по 250 px, то я отображу ровно 4 колонки, даже если они будут шире 250 px.
  • Иначе я отображу столько колонок, сколько получится, но чтобы ширина каждой была не менее 250 px.
  • Если ширина всего элемента меньше 250 px, то покажу контент в одну колонку на всю ширину.

Пример

Скопировано

В примере ниже вы можете поменять количество колонок у заданного текста. Если выбрать вариант auto, ширина одной колонки составит 160px.

Открыть демо в новой вкладке

Если одновременно задать column-width и column-count, браузер будет отображать столько колонок, сколько влезет в ширину родительского блока. В примере ниже мы можем при помощи слайдера управлять размером блока. Граница поможет нам визуализировать его размеры. Давайте зададим блоку с текстом фиксированное число колонок и ширину колонки:

        
          
          .text-wrapper {  column-count: 4;  column-width: 250px;}
          .text-wrapper {
  column-count: 4;
  column-width: 250px;
}

        
        
          
        
      

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

Открыть демо в новой вкладке

Также на количество колонок внутри элемента, помимо ширины самой колонки, влияет свойство column-gap.

На практике

Скопировано

Иван Ельцов советует

Скопировано

Разбивка контента на колонки - один из основных принципов вёрстки печатной продукции. Есть ряд исследований, доказывающих, что удобнее всего воспринимать информацию, если ширина строки составляет от 55 до 75 символов. Однако в современном вебе разбивка текста на колонки применяется весьма редко, и чаще всего используется для стилизации под газетную вёрстку или для оформления художественных материалов.

Многоколоночную вёрстку можно использовать для построения относительно сложных графических компоновок, таких как Masonry Layout. Популярным представителем этого визуального стиля является Pinterest.