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

jQuery sin conflictos

Existen muchos beneficios al usar alguna de las librerías de javascript disponibles hoy en día (cómo han proliferado.. increíble). Facilitan escribir código y uno se concentra en mejores funcionalidades que en tratar de reinterpretar código. Y qúe decir de los efectos que cada vez vienen mejores… una delicia de utilizarlos. Cuando uno comienza un proyecto, [...]

jQuery Plugin: simpleAccordion

Un nuevo plugin para jQuery sale a la luz. Nuevamente, iluminado por una necesidad en un proyecto web, qué mejor que hacer las cosas a mi manera y al mismo tiempo aportar al mundo con algo que quizás le será útil a alguien más. Un colega necesitaba hacer una sección de Preguntas Frecuentes (FAQ) y [...]

Más tipografías con sIFR

Una de las grandes limitaciones de diseño web está en el manejo tipográfico, ya que tenemos una escasa gama de tipografías disponibles a la que podames aspirar que posean todos los usuarios. Hablamos de Arial, Helvetica, Verdana y Tahoma para las sans-serif (palo seco); Georgia, Times/Times New Roman para las serif y Courier/Courier New para [...]

  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