CSS3 HTML5

Los nuevos estándares para el diseño y desarrollo web y Móvil

Capacitación HTML5

Multicolumna con CSS3

| Deja tu comentario

La posibilidad de trabajar con una propiedad que nos permita establecer múltiples columnas en un mismo contenedor es una característica muy esperada en CSS.

Por fortuna nuestra plegarias fueron escuchadas y el W3C ha puesto en marcha el módulo multicolumna, conocido como Multi-column Layout Module.

Siempre que muestro esta característica en clase, mis alumnos se sorprenden por su utilidad y, especialmente, por su facilidad de uso.

¿Cómo funciona? Veamos su versatilidad en la práctica. Supongamos que contamos con un elemento div que tiene una clase llamada caja. A continuación veremos el código para dividir su contenido de texto en tres columnas, con una separación de 10px entre cada una de ellas.


div.caja{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}

La propiedad column-count es la que indica la cantidad de columnas y column-gap es la que nos permite indicar la separación entre ellas. ¿Sencillo verdad?

Otras propiedades que nos pueden resultar útiles al trabajar con múltiples columnas son column-width y column-rule. El quiebre entre columnas lo trabajaremos con break-before, break-after o break-inside.

Si ingresamos en http://www.w3.org/TR/css3-multicol/#property-index podremos ver todas las propiedades relacionadas y sus valores posibles.

¿Te ha resultado interesante este tutorial? ¿Te gustaría aprender más sobre CSS3?
Ingresa aquí y ponte en contacto ahora
.

Autor: Damián

Escribió cuatro libros, relacionados con sistemas operativos, hardware y desarrollo web, entre ellos se destaca Webmaster Profesional (editado en el año 2009) y HTML 5 – Entienda el cambio, aproveche su potencial lanzado en el 2011 en formato papel y en el 2012 en versión ebook. Se ha desempeñado como editor de libros relacionados con informática. Ha realizado trabajos de edición en la revista Users Digital Design, para la cual participa también escribiendo notas sobre diseño y desarrollo web. Ha colaborado como autor en la revista Dr. Max, Phone Users y en diversas colecciones de fascículos (Universo PC y 1000 Ideas PC, entre otras). Escribe contenidos para diversos medios online, incluyendo el sitio RedUSERS.com. Es consultor y especialista en desarrollo web, con amplio conocimiento en HTML, CSS, AJAX, PHP y Bases de datos. En la actualidad se destaca su trabajo en la preparación de contenidos relacionados con CSS3 y HTML5. Es profesor y dicta curso de HTML5 y clases en la Carrera de Programador Web en el Instituto IT Master Professional Training, en Buenos Aires (Argentina).

Deja un comentario

Es requirido que se compelte.*.