Maquetación web en varias columnas con CSS3


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+

CSS3 realiza una maquetación directa del texto en diferentes columnas de manera automática, ya que posee distintos elementos y atributos que le confían al navegador la tarea de producir el texto en multicolumna. Desde que existe esta característica, la maquetación web goza de un interesante recurso para la presentación de la información y que a más de uno nos traía de cabeza para conseguirlo con otros medios, como las tablas. En este artículo explicamos cómo utilizar el elemento column y sus diferentes atributos.

Maquetar en diferentes columnas hace que la lectura sea mucho más cómoda y legible que si se hace sólo en una. Los periódicos llevan haciendo esto desde siempre, aunque es cierto que el texto que “cabe” en una página web no es tan abundante como el que entra en una hoja de periódico. CSS3 adapta uniformemente el texto, a medida que este crece o se reduce, en las columnas que le indiquemos, ofreciendo una solución, sencilla y automática.

La estructura que debemos seguir para implementar multi-columna en nuestros textos, será la siguiente:

  • colum-width. Lo utilizaremos para precisar la anchura de las distintas columnas.
  • column-gap. Servirá para definir el espacio en blanco entre columnas.
  • column-rule.  Permite crear una línea divisoria entre las columnas.

Hoy en día todos los navegadores soportan ya la multicolumna, pero por si alguna razón, estuviéramos realizando un desarrollo para versiones de navegadores antiguos, en los que estuvieran en fase experimental, deberíamos utilizar los prefijos -moz- en el caso de Firefox y -webkit- para el navegador Safari o Chrome.

En este, este sería un ejemplo para que funcionase la multicolumna en estos navegadores:

.multicolumna {
 -moz-column-width: 18em;
 -moz-column-gap: 18px;
 -webkit-column-width: 18em;
 -webkit-column-gap: 18px;
 -webkit-column-rule: 1px solid #ccd;
 -moz-column-rule: 1px solid #ccd;
 }

Si los navegadores soportan la posibilidad para crear una multicolumna, definiríamos el número de columnas que queremos integrar en el texto, y lo haríamos con el atributo column-count, así:

.multicolumna4columnas{
 -moz-column-count: 4;
 -moz-column-gap: 2em;
 -moz-column-rule: 1px solid #ccf;
 -webkit-column-count: 4;
 -webkit-column-gap: 2em;
 -webkit-column-rule: 1px solid #ccf;
 }

No cabe duda que la distribución del texto en columnas ha abierto muchísimas e interesantes posibilidades para la maquetación en las páginas web. Si necesitas más información sobre el tema, la puedes consultar directamente en esta sección de la W3C.


Share on FacebookTweet about this on TwitterShare on LinkedInEmail this to someoneShare on Google+
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *