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 (Multicolumna con CSS3).

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{
  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.

Para saber más

La opción multicolumna con CSS3 nos ofrece una variada gama de posibilidades para nuestra maqueta. En este artículo hemos visto lo básico. Profundizar sobre el tema nos puede permitir organizar de una manera más eficiente una mayor variedad de opciones de diseño.

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

Si estás interesado en CSS te recomiendo mi artículo: Una guía práctica para organizar y optimizar el CSS de nuestros proyectos.