Como crear multi columnas con CSS column-count. Como dividir un texto en columnas estilo revistas o periódicos con CSS

Afortunadamente los navegadores que existen hoy en el ecosistema del internet han venido adaptando más y más todas las especificaciones del consorcio W3C. Una de esas especificaciones es la de poder dividir el area visual en columnas y que el contenido fluya en la pantalla divido en columnas, tal como lo vemos en las revistas o periódicos. Pues bien, este efecto ya se puede lograr en muchos navegadores usando el módulo ‘column-count’.

Explicación Rápida Para Usar column-count

Un diseño multi-columna puede ser logrado fácilmente añadiendo las respectivas propiedades que componen este módulo en una hoja de estilo, veamos este ejemplo:

CSS

p.estilo4Columnas {
column-count: 4;
-moz-column-count: 4;
-webkit-column-count: 4;
}

En este caso, hemos aplicado la propiedad a un <párrafo> dividiendo el bloque visual en 4 columnas iguales usando ‘column-count’. Hemos, además, usado la especificación correspondiente para cada navegador para estar seguros de que funcionara bien en cualquier dispositivo.

En este ejemplo, puedes interactuar directamente con el archivo CSS y cambiar los valores. Luego puedes ver el resultado y así entender mejor como funciona.

[editr item=”post-643″ html=”cssColumnCount.html” css=”column-count.css” scrollbar=”dark” theme=”monokai” ]

Ver Ejemplo

Este elemento de CSS puede ser usado con la siguiente propiedad para darle un toque visual mas personalizado:

column-gap: (para especificar cuanto espacio dejar entre las columnas)

Como pueden ver es bastante sencillo de usar. Si tienen preguntas, déjenme un comentario que con gusto les responderé.

 

Add Comment