Diseño Web

Aprende a utilizar el inspector Flex y Grid que incluye el navegador Firefox y conoce las diferencias que tiene respecto al inspector de Chrome.

Qué es Grid

Grid es uno de los nuevos valores de HTML5 que podemos dar a la propiedad display de un elemento, y que nos permite maquetar las páginas web de una manera mucho más fácil que se hacía con la forma tradicional.

Por qué Grid

Con Grid hacemos que un elemento contenga la propiedad display:grid, lo que nos permitirá maquetar de una forma mucho más fácil y potente que con cualquier otro tipo de propiedades.

Esto es así porque, al contrario que en otras formas de maquetación, en Grid podemos establecer tanto las filas como las columnas que va a tener el diseño, maquetación o layout, además no sólo en una dimensión, como con Flexbox, sino que vamos a poder especificar la estructura en dos dimensiones.

Ejemplo de uso de Grid

Utilizando propiedades CSS vamos a poder especificar estructuras de este tipo:

En esta estructura tenemos cuatro filas y cuatro columnas, una cabecera que ocupa la primera columna entera, una zona main que ocupará seis celdas, el pie que ocupará la última fila y una barra lateral que ocupará dos celdas.

Todo lo anterior lo podemos hacer utilizando únicamente propiedades CSS, dando al contenedor que tendrá esa estructura la propiedad display:grid.

Aspecto a tener en cuenta

Hay que tener cuidado cuando se utiliza esta propiedad, porque a día de hoy no todos los navegadores la soportan. No obstante hay que decir que la gran mayoría si lo hace, como por ejemplo Chrome, Safari, Firefox, Opera y todos los más usados, aunque pueden existir navegadores de ciertos dispositivos dónde no funcione.

Si quieres aprender mucho más sobre esta tecnología, descarga esta Guía de Maqueación Web con CSS Grid.

También puedes hacer el Curso de Flexbox y CSS Grid creado por nuestro profesor experto Juan Diego. Dónde aprenderás las técnicas para maquetar webs de una forma más fácil y profesional.