Después de años peleándonos con las tablas, los float, frameworks como Bootstrap…etc etc, por fin parece que podemos ver la luz al final del túnel y tenemos una solución que nos va a permitir de forma cómoda y sencilla crear los layouts de nuestras páginas web. Se trata, ni más ni menos que de Grid Layout , una especificación de la W3C pensada única y exclusivamente para facilitarnos esta, hasta ahora, ardua tarea.
En qué consiste Grid Layout
Mediante un nuevo valor para la propiedad “display”, podemos indicar a un contenedor dentro de nuestra web, que se comporte como una “rejilla”.
Para ello, algo tan sencillo como esto:
.container {
display: grid;
}
A partir de aquí, ya tenemos nuestro contenedor preparado y, a partir de una serie de propiedades, vamos a poder colocar los elementos de nuestra página web de forma muy sencilla, en la zona exacta que queramos de nuestra rejilla, sin tener que preocuparnos de floats, overflows, ni nada por el estilo. Incluso, cuando trabajemos en el layout responsive, para los distintos tamaños de pantalla, podremos cambiar la posición o distribución de esos elementos dentro de la rejilla con apenas un par de líneas y, lo que es mejor, sin tener que tocar el orden de nuestro HTML, lo que hará de este un código mucho más legible y semántico.
Estado actual de la especificación
Actualmente no está implementado en navegadores, aunque según diversas fuentes se espera que para mediados de este próximo mes de Marzo ya empiece a estar disponible en Chrome y Firefox.
Mientras tanto, podéis probarlo habilitando las flags correspondientes en cada uno de ellos:
- En Chrome: habilitar el flag “Funciones experimentales de Web Platform”, accediendo desde chrome://flags
- En Firefox: habilitar el flag “layout.css.grid.enabled”, accediendo desde about:config
Como siempre, podéis consultar la compatibilidad de los diferentes navegadores en Can I Use.
Referencias
Para finalizar, os dejo algunos enlaces interesantes sobre el tema, y si queréis adentraros en el de forma más intensa, y sois de Bilbao o alrededores, los próximos días 2 y 3 de Marzo imparto un taller de 8 horas en el Parque Tecnológico de Zamudio, dentro de la iniciativa Euskadi+Innova.
También existe la posibilidad de obtener formación de forma remota y particular a través de Skype. Contacta conmigo para más información.
Taller Grid Layout
- Más información: https://imanolt.sg-host.com/formacion/grid-layout/
- Inscripciones (50 €): http://www.spri.eus/euskadinnova/es/enpresa-digitala/agenda/grid-layout-nueva-forma-maquetar-colocar-informacion-nuestras-paginas-webs/12714.aspx
