Columnas Múltiples con CSS3

La idea de diagramar contenido con columnas múltiples es un método heredado del diseño editorial, donde se utilizan retículas para diagramar tanto texto como imágenes (y publicidad, claro). Su uso se justifica en la capacidad del lector de seguir la misma línea de texto sin perderse en su continuidad. El texto de divide en varias columnas de menos ancho facilitando la comprensión del tema que se está tratando.


Columnas Múltiples con CSS3

La implementación de columnas múltiples en CSS no es algo nuevo, fue propuesto a la W3C en el 2001 y ya estaba implementado en Webkit desde sus inicios, en Firefox desde la versión 1.5 y se podía utilizar fácilmente desde 2006. Pero con el advenimiento de CSS3 como un estándar cada vez más fuerte, y con una presión bastante notoria por parte de los desarrolladores para implementar sus beneficios en sus proyectos web se ha hecho cada vez más viable su uso. Además, existen fallbacks que permiten que se pueda utilizar en navegadores más antiguos o que no tengan esta capacidad sin mayores problemas.

Por suerte su implementación es bastante simple. Dado el siguiente HTML con un bloque de texto:

<div id="columna">
   <p>International Bitterness Units (IBU), Caramel malt, Pitching Bottom-fermenting Yeast. Double bock/dopplebock; Reboboam Mash Tart Lagering Grist Caramel malt Bittering Hops...</p>
</div>

Para separarlo en 2 columnas basta con utilizar la propiedad column-count: 2;

#columna {
   -webkit-column-count: 2;
   -moz-column-count: 2;
   column-count: 2;
}

Ver Ejemplo 1

La lista completa de propiedades:

column-count:
la cantidad de columnas.
column-width:
define el ancho de las columnas, caso no quieras que el browser calcule de acuerdo al modelo de caja.
column-gap:
el espacio entre cada columna, en la unidad de medida que estimes.
column-rule:
borde (separación) entre cada colina, por ejemplo una línea recta.

Ver Ejemplo 2

Ahora, qué hacemos con los browsers que no tienen la capacidad de interpretar esta úil propiedad? Según caniuse.com, ningún IE lo soporta en la actualidad, quizás IE10 lo haga. Afortunadamente JavaScript viene al rescate con un pequeño script que incluiremos luego del estilo, el que agregará el soporte de column-count y demases.

Ver Ejemplo 3

Como ven, no hay razón para no comenzar a utilizar las columnas múltiples.

Links:

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Podcast 04

Muchos temas me son más fáciles de expresar verbalmente que a través del teclado, principalmente cuando son de opinión. Y compartir la opinión, tanto mía como la de ustedes ha sido uno de los principales motivos por los cuales mantengo este sitio. Aparte de compartir conocimientos, crear un lugar -aunque sea virtual- para concentrar y [...]

Gradientes con CSS 3

Muchas de las propiedades CSS3 han estado presentes en browsers Webkit como Safari y Chrome desde sus inicios; a medida que avancen han mejorado el soporte y no es diferente con el uso gradientes sólo con CSS. Desde la versión 3.6 se pueden utilizar con Firefox, y últimamente han tomado mucha fuerza en aplicativos web [...]

Review: CSS Hat

Codear HTML/CSS es una tarea cada vez más requerida, y más exigente debido a lo rápido que avanza la tecnología web (gracias al aporte de muchos contribuidores anónimos, y al silent upgrade de los browsers entre otros factores). Por esto se agradece cuando llega una herramienta que nos facilite la vida y mantenga nuestro trabajo [...]

  1. Interesante artículo; otro artículo para compartir
    http://desarrollolibre.net/blog/tema/55/css/multiples-columnas-con-css3

    andres
    25 / Noviembre / 2013

  1. [...] Columnas Múltiples con CSS3 CSSLab La idea de ...
    Columnas Múltiples con CSS3 CSSLab | Recursos | Scoop.it

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 35 veces