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 https://www.w3.org/TR/css3-multicol/#property-index podremos ver todas las propiedades relacionadas y sus valores posibles.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta