Cómo dividir párrafos en columnas con CSS

Cuando trabajamos maquetando páginas web que llevan mucho texto, en ocasiones puede interesarnos dividir uno o varios párrafos en columnas al estilo de un periódico. Algo que aunque a priori parece sencillo, más de uno hemos tenido que pegarnos chocazos para llevarlo a la práctica en portales dinámicos. Pero gracias a CSS3, ahora disponemos de varias propiedades, que resolverán el problema de un modo muy cómodo.

La primera propiedad sería column-count, que permite decidir en cuántas columnas queremos dividir un texto. Su funcionamiento es bastante sencillo, se aplica dicha propiedad de CSS simplemente a la capa o DIV que contendrá la información, especificando el número de columnas y el navegador calculará automáticamente el tamaño de la capa y las separará de manera proporcional.

.columnas{
    column-count: 3; /* número de columnas */
}

Pero además podemos usar dos propiedades más que son column-gap y column-rule para personalizar el tamaño de nuestras columnas, así como la separación de las mismas.

.columnas{
    column-count: 3; /* número de columnas */
    column-gap: 100px; /* ancho de columnas */
    column-rule: 5px outset #999999; /* separación de columnas */
}

See the Pen Dividir párrafos en columnas con CSS by Jesús Tovar (@jesustovar) on CodePen.

Recordad que es posible que estas propiedades de CSS aún no estén integradas en todos los navegadores, pero podéis usar los prefijos de los navegadores para que tengan el mismo funcionamiento.