CSS3 múltiples columnas

Ahora ya se puede usar CSS3 para crear columnas (como las de un periódico) en nuestros sitios web sin tener que crear múltiples layout y párrafos para cada columna.

Según el W3C (http://www.w3schools.com/css3/css3_multiple_columns.asp) hay tres propiedades principales para realizar esta función. En este post explicaremos de manera sencilla como utilizar esas propiedades para crear varias columnas de texto.

Propiedades

• column-count
• column-gap
• column-rule

Firefox requiere el prefijo -moz-.

Chrome y Safari requieren el prefijo -webkit-.

Múltiples columnas

La propiedad column-count define el número de columnas en las que el texto se ha de dividir. En el ejemplo nuestro párrafo se dividirá en 3 columnas.



Ver ejemplo del W3C School

Espacio entre columnas

Ahora a nuestro parrafo le agregamos la propiedad column-gap que define el espacio entre cada columna. En el ejemplo el espacio será de 40 pixeles.

Ver ejemplo del W3C School

Regla de columnas

La regla no es más que una línea vertical que divide a cada columna para darle una mejor presentación a nuestro texto. Continuando con nuestro párrafo le agregaremos la propiedad column-rule para hacerlo más presentable.

Nuestro parrafo se verá así:

Ver ejemplo del W3C School

Gracias por leer este post!!