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

Tip Precoz: Background al 100% con CSS3

Entramos en una era donde cada vez más podemos aprovechar las bondades de CSS3 sin tener que parchar funcionalidad con scripts y plugins de JavaScript. En esta ocasión, utilizaremos una propiedad CSS3 para hacer que una imagen de fondo cubra el 100% de la ventana, escalándose hasta adaptarse. Afortunadamente los browsers están aplicando suavizado a [...]

Animaciones y Transformaciones con CSS3

Animaciones y Transformaciones con CSS3

Se puede ver un aumento en el uso de CSS3 en sitios web de amplio uso, y actualmente es un diferencial a la hora de atraer y enganchar al usuario. Aunque sé que es pronto para sumergirse totalmente en estas aguas, no perdemos nada con jugar un poco con transiciones y animaciones en CSS3. NOTA: [...]

Tip Precoz: obtener valor numérico con JavaScript

Con jQuery constantemente necesitamos crear variables para tomar valores CSS de elementos, para luego construir nuevos elementos o interacciones; constantemente lo hago en plugins cono Timelinr o Blox!, pero JavaScript nos ofrece un método más rápido que el andar haciendo slices. Desde el siguiente ejemplo, tomaremos la el valor CSS de margin-top del buscador de [...]

  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