Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Qué es CSS Grid

Juan Diego Pérez Jiménez
  • Escrito por Juan Diego Pérez Jiménez el 12 de Marzo de 2019
  • 1 min de lectura | Diseño Web
Qué es CSS Grid
El reproductor de video será cargado en breves instantes.

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.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Curso de HTML5, CSS3 y JavaScript

Curso de HTML5, CSS3 y JavaScript

curso

Aprende lo básico para comenzar a programar sitios o aplicaciones web. En este curso verás HTML5, CSS3 y JavaScript básico.

Duración: 7 horas y 9 minutos

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 8 cursos:

  • Curso de HTML5, CSS3 y JavaScript
  • Curso de React JS
  • Curso de Angular 6

y 5 cursos más!

Duración: 52 horas y 11 minutos

Qué es FlexBox

Qué es FlexBox

Diseño Web

11 de Marzo de 2019

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

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars