Em um layout de várias colunas, você pode fazer com que os elementos se expandam pelas colunas com column-span.
h2 ( -webkit-column-span: all; column-span: all; )Atribua column-spana um elemento dentro do layout de várias colunas para torná-lo um elemento de abrangência. O layout de várias colunas será retomado com o próximo elemento não estendido.
O valor de column-spanpode ser allou none.
Defina um elemento com column-span: allpara fazê-lo abranger as colunas.
O valor noneda propriedade é o interruptor kill para um elemento de abrangência. Você pode usar isso ao trabalhar com consultas de mídia para dizer ao elemento spanning para parar de spanning.
Veja o exemplo de extensão de coluna Pen por CSS-Tricks (@ css-tricks) em CodePen.
Suporte para navegador
O Firefox não oferece suporte para isso column-span, mas existem soluções alternativas interessantes.
Aqui está o suporte para layout de várias colunas em geral:
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10,0-10,2 |
Não se esqueça dos seus prefixos!