Blog

Columnas múltiples con CSS3

CSS3 incluye un conjunto de atributos que permiten distribuir texto en columnas simétricas, de manera automática y fácil. A continuación te mostramos cuáles son y como se utilizan.

• column-width: Con esta propiedad podemos indicar el ancho de las columnas.
• column-gap: Con esta propiedad podemos indicar el espacio entre cada columna.
• column-rule: Con esta propiedad podemos dibujar una línea divisoria o borde entre la columnas.
• column-count: Con esta propiedad podemos indicar cuantas columnas deseamos crear.

Básicamente tenemos dos maneras de dividir nuestras párrafos en columnas; definiendo el número de columnas con la propiedad column-count, o definiendo el ancho de cada una con la propiedad column-width.

Con column-count siempre obtendremos la cantidad de columnas especificadas. El ancho de las columnas dependerá del ancho del elemento contenedor y del tamano declarado en la propiedad column-gap

Si por el contrario usamos column-width garantizamos columnas de ancho fijo pero la cantidad de columnas depende del ancho del contenedor del elemento al que se aplique la propiedad y por supuesto para calcular la cantidad de columnas posibles tambien se tiene en cuenta la propiedad column-gap que permite establecer la separación entre columnas.

Resumen:

Si nos interesa la cantidad de columnas pero no su ancho usamos column-count. El ancho de cada columna se calcula automáticamente.
Si nos interesa el ancho de cada columna pero no la cantidad posible de columnas en las que desplegar el texto usamos column-width y la cantidad de columnas posibles se calcula automáticamente.

¿Cuál de los métodos es mejor?

Los dos funcionan bien y la elección de uno u otro método para desplegar texto en columnas depende de las necesidades o del gusto del maquetador. Para un diseño con ancho de pantalla conocido y fijo yo prefiero definir la cantidad de columnas, para un diseño responsive o cuando no cononozco a priori el ancho del dispositivo donde se va a desplegar el texto, suelo definir el ancho de las columnas. Ver ejemplo completo en una nueva pestaña