Los textos de tu web en varias columnas con CSS 3

CSS Multi-column Layout

Los textos de tu web en varias columnas con CSS 3Inicio la categoría o sección CSS del blog de INDAGA con un post sobre la creación de textos multicolumna utilizando la última versión de las hojas de estilo o Cascading Style Sheet: (CSS 3), la cual, si no me equivoco, ya soportan la gran mayoría de los navegadores web, menos mal!

Recuerdo que cuando estaba en Hoja Digital –un periódico online ya inexistente y cuyas noticias estaban en formato columnas, emulando al típico periódico de papel-  la maquetación de cada noticia y de todas las páginas la tenía que realizar a través de tablas, lo cual era bastante pesado y difícil de mantener, además de no estar recomendado por la W3C. ¡Qué bien me hubiera venido la maquetación multi-columna automática!

Hoy por hoy podemos crear una páginas o entradas con varias columnas, siendo la hoja de estilos la encargada de maquetarlas de forma automática, utilizando la especificación  de CSS Multi-column Layout. Eso sí, la hoja de estilos debes trabajarla bien antes, pero merece la pena. La propiedad encargada de la creación de las columnas sedenomina column-count. Además, podemos añadir cualquier elemento al bloque, como por ejemplo una imagen, dejando que el texto fluya de manera equilibrada.

Un buen artículo al respecto (y en castellano) y con enlaces a ejemplos lo podéis encontrar en Desarrolloweb.com. Esta es una página de ejemplo en HTML basada en el ejemplo de Desarrollo.web y que me servirá de referencia: multi-columnas.html.

Adjunto también un tutorial sobre CSS3  y una utilidad para generar elementos en CSS 3, respectivamente: Tutorial CSS3 (en inglés) y CSS 3 Generator (en inglés).