columns

Удобный шорткат для количества и ширины колонок текста.

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

Кратко

Скопировано

Шорткат columns даёт возможность указать значения для свойств column-count и column-width одновременно, задав количество и ширину колонок.

Пример

Скопировано

Зададим две колонки текста по 500 px:

        
          
          div {  columns: 2 500px;}
          div {
  columns: 2 500px;
}

        
        
          
        
      

Как пишется

Скопировано

Можно указать количество колонок, ширину колонок или оба значения одновременно. Значение, которое не указано явно, устанавливается как auto. Порядок значений может быть любой. Браузер поймёт, что целое число без единиц измерения — это количество колонок, а число с единицами измерения — ширина колонки.

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