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 tamaño 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 también 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 conozco a priori el ancho del dispositivo donde se va a desplegar el texto, suelo definir el ancho de las columnas.