OpenWebinars

Diseño Web

Qué es CSS Grid

Te hablamos sobre otro de los nuevos valores de HTM5, en este caso Grid, con el que poder maquetar de forma más fácil.

Juan Diego Pérez Jiménez

Juan Diego Pérez Jiménez

Experto en desarrollo Web

Lectura 1 minutos

Publicado el 12 de marzo de 2019

Compartir

    Tabla de contenidos

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:

grid

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.

guia-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.

Compartir este post

También te puede interesar

Qué es FlexBox: Conceptos básicos
Blog

Qué es FlexBox: Conceptos básicos

Te contamos qué es Flex, uno de los nuevos valores que ofrece HTML5 para ayudarnos a realizar una maquetación más potente y...

Juan Diego Pérez Jiménez