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 (Multicolumna con CSS3).
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{
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.
Para saber más
La opción multicolumna con CSS3 nos ofrece una variada gama de posibilidades para nuestra maqueta. En este artículo hemos visto lo básico. Profundizar sobre el tema nos puede permitir organizar de una manera más eficiente una mayor variedad de opciones de diseño.
Si ingresamos en https://www.w3.org/TR/css3-multicol/#property-index podremos ver todas las propiedades relacionadas y sus valores posibles.
Si estás interesado en CSS te recomiendo mi artículo: Una guía práctica para organizar y optimizar el CSS de nuestros proyectos.
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