column-span

Свойство column-span позволяет элементу растянуться на несколько колонок при многоколоночной вёрстке.

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

        
          
            .item1 {    column-span: none;  }  .item2 {    column-span: all;  }
            .item1 {
    column-span: none;
  }

  .item2 {
    column-span: all;
  }

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

Если указать none, то элемент не будет растягиваться на несколько колонок. none – значение по умолчанию.

Если указать all, то элемент выпадет из потока и растянется на все колонки. До и после него появятся переносы, контент до и после независимо разделится на колонки.

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

        
          
            <div class="wrapper">    <p>Душа моя озарена неземной радостью...</p>    <h2>Заголовок 2 уровня</h2>    <p>Душа моя озарена неземной радостью...</p>  </div>
            <div class="wrapper">
    <p>Душа моя озарена неземной радостью...</p>
    <h2>Заголовок 2 уровня</h2>
    <p>Душа моя озарена неземной радостью...</p>
  </div>

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

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

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

Как мы видим, получилось не очень красиво. Заголовок может переноситься по колонкам – скорее всего, мы не ожидаем такого поведения от блочного элемента. Чтобы было красиво, зададим для заголовка column-span.

        
          
          h2 {  column-span: all;}
          h2 {
  column-span: all;
}

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

Заголовок «выпал» из общего потока многоколоночного текста. Теперь он растянут на всю ширину, до и после него есть переносы, а параграфы разделились по колонкам так, словно мы задали column-count для каждого из них.