column-fill

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

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

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