En un diseño de varias columnas, puede hacer que los elementos se expandan por las columnas con column-span.
h2 ( -webkit-column-span: all; column-span: all; )Asigne column-spana un elemento dentro del diseño de varias columnas para convertirlo en un elemento de expansión. El diseño de varias columnas se reanudará con el siguiente elemento que no se expanda.
El valor de column-spanpuede ser allo none.
Establezca un elemento con column-span: allpara que abarque las columnas.
El valor nonede la propiedad es el interruptor de interrupción de un elemento de expansión. Puede usar esto cuando trabaje con consultas de medios para decirle al elemento de expansión que deje de expandirse.
Vea el ejemplo de extensión de columnas de Pen de CSS-Tricks (@ css-tricks) en CodePen.
Soporte del navegador
Firefox no es compatible con esto column-span, pero hay soluciones interesantes.
Sin embargo, aquí está el soporte para el diseño de varias columnas en general:
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
¡No olvides tus prefijos!