column-width

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

Кратко

Секция статьи "Кратко"

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

        
        
          
        
      

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

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