20-04-2013

Distribuyendo contenido en columnas mediante CSS

Por lo general, para estructurar un contenido en columnas se utilizan tablas HTML (¡horror!) o bien se utiliza la propiedad float de los elementos para que se distribuyan en filas de forma fluida. Pero si lo que queremos es crear una distribución fluida en columnas, podemos utilizar unas nuevas propiedades de CSS3 que lo permiten.

#exterior {
column-width: 300px;
}

Esta propiedad permite establecer una guía del ancho de columna requerido. Es importante destacar que las columnas no tendrán por qué tomar el valor exacto de column-width, sino que se adaptarán a la página para conseguir un ancho similar al dado. Con column-width se consigue un número de columnas variable, todas con el mismo ancho, que se adaptan según el tamaño del contenedor (el ancho de un div, el tamaño de la ventana del usuario, etc.). Chrome y Safari requieren el prefijo -webkit-, Firefox utiliza -moz- y Opera e Internet Explorer 10 soportan el estándar.

#exterior {
column-count: 3;
}

De esta forma se distribuirán las columnas adecuadamente para conseguir el número de columnas pedido. El ancho de cada una será variable, adaptado al elemento contenedor y al número de columnas. De nuevo, Chrome, Safari y Firefox utilizan sus prefijos, mientras que IE10 y Opera aceptan el estándar.

#exterior {
column-gap: 20px;
column-rule: 1px solid red;
}

Estas dos reglas configuran el estilo de la división de las columnas, column-gap permite modificar el ancho de separación, y column-rule puede crear una línea a lo largo del espacio entre dos columnas.

#interior {
break-inside: avoid;
-webkit-column-break-inside: avoid;
break-before: column;
-webkit-column-break-before: always;
}

Estas reglas cambian el comportamiento de las columnas, indicando dónde deben partirse y donde deben evitarlo. En este caso, los navegadores basados en Webkit (Chrome, Safari…) utilizan propiedades alternativas, denominadas -webkit-column-break-before y -webkit-column-break-inside (además, -webkit-column-break-before acepta un valor distinto al del estándar). Firefox no soporta ninguna de estas propiedades aún, pero se puede utilizar display: table; para evitar cortes dentro de un elemento.

Si queréis más información sobre estas propiedades, y verlas en acción, visitad las páginas al respecto de Mozilla Developer Network y QuirksMode.