Columnas con CSS: Introducción

El uso de columnas para organizar el contenido de un página web, es una de las nuevas posibilidades que nos da el CSS3 aunque, como en la mayoría de estos casos, no es aplicable a Internet Explore excepto en su versión 10; el resto de los navegadores (Firefox, Chrome, Safari y Opera) las incorpora sin problemas aunque requiere el uso de prefijos para cada uno de ellos.

Para entender qué significa esto de las columnas, lo mejor es comenzar a entender cómo se ven las cosas de manera normal.

Supongamos que tengo un contenedor (un DIV) con un cierto ancho (width) y dentro de él, coloco seis imágenes cuyos anchos son iguales pero varían su altura:

<style>
  .demo {
    background-color:#000;
    line-height:0;
    margin:0 auto;
    width: 600px;
  .demo img {
    outline: 1px solid Turquoise;
    width: 200px;
  }
</style>

<div class="demo">
  <img src="URL_IMAGEN_1"/>
  .......
  <img src="URL_IMAGEN_7"/>
</div>

Lo que veré es esto:

normal | vertical-align: top | vertical-align: middle | float:left | float:right

Como miden 200 pixeles de ancho, tres se muestran arriba y las otras tres, debajo; Si quisiera que se vieran filas de cuatro columnas, debería aumentar el ancho del contenedor 200 pixeles más y se acomodarían solas.

Sin otro tipo de propiedad, las imágenes se mostrarán una al lado de la otra, alineadas por su base. Si quisiera, podría alinearlas por su parte superior o centrarlas verticalmente, estableciendo la propiedad vertical-align en las etiquetas IMG; en el demo, sería:

.demo img { vertical-align: top; } o bien .demo img { vertical-align: middle; }

Otra alternativa es hacer que floten en cuyo caso, como el contenedor tiene un color de fondo, también debería dimensionar su altura caso contrario, no se vería:

.demo { height:398px; }
.demo img { float: left; } o bien .demo img { float: right; }

Las distintas variantes pueden ser probadas haciendo click en los enlaces debajo del demo.

Sea como sea y haga lo que haga, las imágenes dejarán espacios en blanco (en negro en este caso) entre ellas ya que todas tienen alturas diferentes y justamente esa es la primera característica sobresaliente de las nuevas propiedades; las columnas ajustan el contenido de tal modo de no dejar espacios entre ellos.

En el mismo ejemplo inicial, agrego esto:

.demo {
  .......
  -moz-column-count:3;
  -moz-column-gap:0;
  -webkit-column-count:3;
  -webkit-column-gap:0;
  column-count:3;
  column-gap:0;
}

Y el resultado será esto:

Sólo requerimos dos propiedades:

column-count indica la cantidad de columnas a ser mostradas; si el ancho del contenedor es escaso, se solaparán; si el ancho del contenedor es demasiado grande, quedrán espacios entre ellas
column-gap es el espacio entre los contenidos, la separación entre ellos y depende del navegador (generalmente es 1em) así que ponemos cero para controlarlo nosotros msimos

Hay propiedades extras que pueden ser agregadas:

column-width establece el ancho de esas columnas
column-rule se utiliza para establecer el tipo de borde y tiene la misma sintaxis que la propiedad border
column-rule-color es el color del borde, similar a border-color
column-rule-style es el estilo del borde, similar a border-style
column-rule-width es el tamaño del borde, similar a border-width

Más ejemplos; cinco columnas con contenidos de 100 pixeles de ancho:

123456789

Y muchas imágenes todas juntitas: