La posibilidad de trabajar con una propiedad que nos permita establecer múltiples columnas en un mismo contenedor es una característica muy esperada en CSS.

Por fortuna nuestra plegarias fueron escuchadas y el W3C ha puesto en marcha el módulo multicolumna, conocido como Multi-column Layout Module.

Siempre que muestro esta característica en clase, mis alumnos se sorprenden por su utilidad y, especialmente, por su facilidad de uso.

¿Cómo funciona? Veamos su versatilidad en la práctica. Supongamos que contamos con un elemento div que tiene una clase llamada caja. A continuación veremos el código para dividir su contenido de texto en tres columnas, con una separación de 10px entre cada una de ellas.

div.caja{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}

La propiedad column-count es la que indica la cantidad de columnas y column-gap es la que nos permite indicar la separación entre ellas. ¿Sencillo verdad?

Otras propiedades que nos pueden resultar útiles al trabajar con múltiples columnas son column-width y column-rule. El quiebre entre columnas lo trabajaremos con break-before, break-after o break-inside.

Si ingresamos en https://www.w3.org/TR/css3-multicol/#property-index podremos ver todas las propiedades relacionadas y sus valores posibles.