column-width

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

Можно указать ширину колонки в любых единицах измерения, кроме процентов. Значение должно быть положительным.

        
          
          p {  column-width: 250px;  column-width: 15vw;  column-width: 10em;}
          p {
  column-width: 250px;
  column-width: 15vw;
  column-width: 10em;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно указать ключевое слово auto. Тогда ширина колонки будет определяться на основании количества колонок, заданного в свойстве column-count.

        
          
          p {  column-count: 4;  column-width: auto;}
          p {
  column-count: 4;
  column-width: auto;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если мы указываем только column-width, браузер разобьёт контент на столько колонок, сколько поместится в родительский контейнер. При этом:

• Если ширина контейнера кратна ширине колонки, то браузер отобразит столько колонок, сколько поместится, и все они будут иметь заданную длину.
• Если на всю ширину поместится больше одной колонки и останется немного места, куда не влезет ещё одна колонка, все колонки растянутся, чтобы заполнить пустое пространство. При этом итоговая ширина колонки будет больше указанной в column-width.
• Если ширина контейнера меньше ширины колонки, браузер выведет все в одну колонку на всю ширину.

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

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

В примере ниже можно поменять ширину колонки и посмотреть, как браузер будет рассчитывать общее число колонок.

В следующем примере мы зададим одновременно и column-width, и column-count.

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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