column-count

Свойство 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.

+ Развернуть