column-fill

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

Кратко

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

Свойство column-fill управляет тем, как контент в многоколоночной вёрстке будет разделяться на колонки в блоках с фиксированной высотой.

Как пишется

Секция статьи "Как пишется"

Можно указать одно из двух ключевых слов:

  • auto;
  • balance (значение по умолчанию).
        
          
          .item1 {  column-fill: auto;}.item2 {  column-fill: balance;}
          .item1 {
  column-fill: auto;
}

.item2 {
  column-fill: balance;
}

        
        
          
        
      

Ещё есть третье значение – balance-all, но его пока не внедрил ни один из браузеров. За процессом внедрения можно следить на Can I use.

Как понять

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

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

Если мы укажем balance, браузер будет пытаться сбалансировать контент между колонками настолько, насколько возможно.

column-fill учитывается только в том случае, если у блока с многоколоночным контентом задана высота. Иначе браузеры будут распределять контент по колонкам автоматически.

Пример

Секция статьи "Пример"

В примере ниже у блока с текстом жёстко задана высота. Граница блока поможет визуализировать его размеры, а column-rule покажет границу между колонками. После блока сразу идёт следующий раздел, представленный здесь только заголовком.

        
          
          .text-wrapper {  column-fill: balance;  column-count: 4;  column-rule: 1px solid yellow;  height: 200px;  border: 1px dashed white;}
          .text-wrapper {
  column-fill: balance;
  column-count: 4;
  column-rule: 1px solid yellow;
  height: 200px;
  border: 1px dashed white;
}

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

У нас получился большой отступ от контента до следующего заголовка. Чтобы избежать этого, давайте зададим column-fill: auto:

        
          
          .text-wrapper {  column-fill: auto;  column-count: 4;  column-rule: 1px solid yellow;  height: 200px;  border: 1px dashed white;}
          .text-wrapper {
  column-fill: auto;
  column-count: 4;
  column-rule: 1px solid yellow;
  height: 200px;
  border: 1px dashed white;
}

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

Теперь контент размещается в колонке до тех пор, пока хватает высоты, и только потом переходит в следующую колонку.