Columnas múltiples con CSS3: column-count, column-gap, column-width y column-rule

Vemos como hacer con CSS3 columnas múltiples, un método muy sencillo de crear una estructura en columnas para tu web.

El oscuro pasado de las tablas en la maquetación web

El uso de tablas para estructurar un sitio resulta únicamente cómodo para quienes se reusan a aprender los nuevos estándares que ofrecen varias y mejores alternativas, el simple hecho de seguir utilizándolas para presentar información que no es propiamente tabular resulta abrumador.

La culpable de todo esto es la maldita costumbre, muchos crecimos como diseñadores web utilizando las tablas como un elemento omnipresente que tenía cabida en cada parte de nuestros sitios, para casi todo lo que necesitaba presentar información existía una celda o una tabla completa que entraba al rescate.

Con ellas matábamos la accesibilidad y la flexibilidad del sitio pero en aquel entonces no nos importaba, era preferible complicarnos la vida utilizando gifs como separadores dentro de las celdas para que el sitio funcionará y se viera bonito, a adaptarlo para utilizar tecnologías emergentes como el CSS, limitadamente utilizado en aquellos años.

Gracias a nosotros que crecimos con ese estilo y propagamos el código por la red, hoy existen muchos desarrolladores principiantes confundidos que se preguntan ¿Cuándo y cómo debo utilizar tablas?, es fácil detectar que en Internet aún existen sitios que utilizan estos elementos para maquetación web, existen ejemplos por la red y métodos de solución que aún recomiendan el uso de tablas incorrectamente, y por otro lado se encuentran con la nueva era de la estandarización donde van surgiendo cada vez más nuevos estándares y mejores maneras de estructurar el código.

La nueva era, divs para crear estructuras

Si tú haz llegado hasta aquí con esa encrucijada de utilizarlas o no, te tengo una respuesta muy sencilla, utiliza las tablas únicamente para presentar datos que lo ameriten, ya sea un conjunto de listas compuestas por varios datos, información estructurada de manera tabular, y aquella que es obtenida mediante una consulta a una base de datos. Por nada del mundo las utilices para maquetación, para crear headers, o footers, si lo que deseas es estructurar las partes de tu sitio web debes utilizar las capas, representadas por la etiqueta “div”, y verás que con ello reduces el tiempo de carga de tu sitio, así como muchas otras ventajas relacionadas tanto con el hosting, semántica y con el ahorro de tiempo tanto para ti como para el usuario.

Una vez definido esto, reconoceremos a las capas “div” como las auténticas salvadoras que han venido a aclarar el panorama de la estructuración de nuestros sitios, pero ¿Podemos manejarlas de una mejor manera para optimizar aún más dicha estructura?, por supuesto para ello existen lenguajes como CSS3 que nos vienen a ambientar aún más la fiesta.

CSS3 o cómo flexibilizar nuestras maquetas

Desde 2005, año en que vio la luz por primera vez el proyecto de CSS3, se empezaron a desarrollar especificaciones con distintas funciones y tareas adaptables para la estructuración de nuestro sitio web, estilos aplicables a nuestras capas para hacer de estás más flexibles y adaptables al medio donde se desplegará la información.

Una de estás funcionalidades son las columnas múltiples, las cuales son generadas única y exclusivamente por estilos, sin necesidad de agregar separadores ni mucho menos celdas para desplegar la información en forma de tabloide.

En la actualidad son poco conocidas y raramente utilizadas, todo esto producido por la falta de soporte en Internet Explorer, ya que sólo son admitidas y desplegadas en los navegadores basados en WebKit y en Mozilla, por lo que si tienen pensado desarrollar un proyecto para todos los navegadores deben considerar crear una versión alterna para aquellos que usen IE8 o inferior.

Básicamente lo que produciremos al agregar esta propiedad a los elementos de nuestro sitio, es convertir una línea continua o un párrafo grande en varias columnas, tomando como base los atributos “column-count”, “column-gap”, “column-rule” y “column width” para darle la forma deseada.

Lo primero que debemos hacer es crear nuestra estructura del sitio de la siguiente manera:

<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>Columnas Múltiples con CSS3</title> 
</head> 
<body> 
     
<div id="contenedor"> 
	<h1>Diario "El Amarillista"</h1> 
	<img src="http://www.dirjournal.com/info/images/roswell-crash.jpg" alt="Cae Nave en Kuala Lumpur" /> 
	<h2>Cae nave espacial en Kuala Lumpur</h2> 
	<p> 
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a lectus nec felis bibendum bibendum quis nec dolor. Etiam dignissim elit quis leo posuere et viverra mauris tristique. Vestibulum lacinia sapien a purus bibendum iaculis nec vitae sapien. Quisque hendrerit, leo quis pellentesque scelerisque, ipsum ligula luctus purus, ut viverra dolor mi et orci. Donec feugiat cursus consectetur. Nunc scelerisque, nisl sed feugiat faucibus, sem augue dapibus erat, congue lobortis diam dolor ac ligula. Suspendisse fringilla lacus ut mi accumsan quis commodo sapien aliquam. Donec sapien nulla, placerat quis ullamcorper sed, rhoncus non lectus. Ut a dui in magna lacinia mattis ut et leo. Nullam malesuada pellentesque est et dictum. Vivamus ac erat vel augue facilisis rhoncus. Cras quis augue ut purus ullamcorper mollis. 
	</p> 
</div> 

</body> 
</html>
  

Agregamos un gran párrafo con el famoso “Lorem ipsum” para ver como funciona la propiedad, dicho párrafo está dentro de una capa llamada “contenedor” y en base a esto aplicaremos el siguiente estilo a la relación:

#contenedor p {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
  -moz-column-count: 3;
  -moz-column-gap: 10px;
  column-count: 3;
  column-gap: 10px;
  }
  

Como se puede apreciar escribimos las mismas dos líneas de atributos en tres ocasiones pero con diferentes prefijos, esto lo hacemos para que la función sea compatible con la mayoría de los navegadores, el prefijo “webkit” es para Safari y Chrome, “moz” para Mozilla y los atributos sin prefijo son para aquellos navegadores que así lo requieran.

El atributo “column-count” sirve para especificar en cuantas columnas queremos que se despliegue la información, en nuestro caso son tres. Por su parte el atributo “column-gap” sirve para establecer el espacio que existirá como separador entre cada columna, a lo que nosotros le damos el valor de 10 píxeles.

Si deseamos agregar más control sobre el funcionamiento de las columnas podemos utilizar otros dos atributos, “column-width” que nos permite determinar cuanto medirá cada columna y “column-rule” que permite agregar especificaciones a las divisiones entre cada columna, comúnmente usado para establecer un borde (column-rule: solid #000000 1px;).

Podemos detallar más el estilo de los diferentes elementos del sitio agregando más gama de colores y creando efectos como el difuminado sobre el encabezado; todo lo que creamos necesario para que nuestro sitio luzca de la mejor manera. A nuestra página de ejemplo he decidido agregar lo siguiente:

body{
  background: #282828;
  }
  #contenedor {
  width: 500px;
  margin: auto;
  background: #F0F0F0;
  padding: 10px;
  font: 12px helvetica, arial, sans-serif;
  }
 
  img {
  width: 100%;
  }
  h1{
  color: #303030;
  font-size: 48px;
  text-shadow: 2px 2px 5px #505050;
  }
  #contenedor p {
  -webkit-column-count: 3;
  -webkit-column-gap: 10px;
 
  -moz-column-count: 3;
  -moz-column-gap: 10px;
 
  column-count: 3;
  column-gap: 10px;
  }
  

Dicho estilo deberá añadirse a nuestro código con alguno de los dos métodos conocidos, ya sea escribiéndolo directamente dentro de las etiquetas “head” o agregándolo como un archivo externo con extensión “.css”. Cualquiera que sea la manera de hacerlo obtendremos como resultado una página en forma de tabloide en colores grises lista para ser publicada.

Como pudimos observar es un método bastante sencillo, fácil de aplicar y sobre todo de aprender, no hay necesidad de complicarnos la vida con tablas, ni de utilizar métodos aún más arcaicos como el salto de línea ni los gifs transparentes para separar, con esto nuestro código quedará limpio y claro.