Crear Múltiples columnas con CSS3 Multicolumn

Esta propiedad de css3 nos va a permitir extender el contenido de un elemento html en múltiples columnas, igual como se utilizan en los periódicos y revistas. Esto sirve para no hacer ver una columna de texto muy larga y tediosa a la vista, si no que al insertar múltiples columnas vamos a poder ver un solo artículo en un tamaño determinado en un solo pantallazo del navegador, y así no evitamos el hacer scroll, que a mucha gente aburre.

Con CSS3 Columns el navegador determina cuando pone fin a una columna y comienza la siguiente columna, sin necesidad de algún código extra vamos a conservar la flexibilidad para cambiar el número de columnas así como sus anchuras.

1 – La Propiedad column-count

Esta propiedad nos hace especificar cuantas columnas queremos mostrar en el elemento que se la aplicamos por ejemplo un div, el valor por defecto es auto, es decir solo una columna, si aumentamos el numero de columnas estas se añadirán a su izquierda.

Ejemplo:

El resultado seria:

css3-column

Nota: Para utilizar esta propiedad de CSS3 vamos a utilizar los prefijos de los navegadores (Ver nota), pero solo para Firefox, Chrome y safari (-moz-, -webkit-), Opera a partir de su versión 11 da apoyo a esta propiedad sin ningún prefijo y IExplorer aun no apoya esta propiedad.

2 – La Propiedad column-gap

Esta propiedad nos va a especificar la anchura del espacio entre las columnas:

css3-column

3- La propiedad column-width

Esta propiedad lo que nos dice es que podemos especificar un ancho mínimo para las columnas en un contenedor, claro está, si no hemos especificado el numero de columnas a mostrar.

Ejemplo: Si tenemos un div de 400px de ancho y un espaciado de columnas de 10px y declaramos un ancho de columna de 150px, el navegador va a crear 2 columnas.

4 – La propiedad column-rule

Esta propiedad básicamente no hace delimitar las fronteras de cada columna, con esta propiedad podemos especificar un borde con su color, y su ancho. Esto aparecerá en el centro de las columnas, es decir como un separador.

Seria declarado de la siguiente forma:

Estas son como las principales y más conocidas, claro existen muchas reglas y propiedades para multi-column, pero desafortunadamente no son acogidas todavía por los navegadores.

Para conocer mas y en profundidad acerca este tema: http://www.w3.org/TR/css3-multicol/

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo