![Page 1: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/1.jpg)
Web
CSSGrid Layout
Rogelio Ferreira Escutia
Profesor / InvestigadorTecnológico Nacional de MéxicoCampus Morelia
![Page 2: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/2.jpg)
Conceptos
![Page 3: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/3.jpg)
3
CSS Grid Layout
.
Es una técnica que permite a los desarrolladores Web crear diseños responsivos complejos más fácilmente y que puedan ejecutarse en diferentes navegadores.
![Page 4: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/4.jpg)
4
CSS Grid Layout
.
Actualmente no es un estándar, pero se encuentra como un candidato recomendado por la W3C desde el 2017.
![Page 5: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/5.jpg)
5
CSS Grid Layout
.
Soporte 93.83% (febrero 2020):
![Page 6: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/6.jpg)
Creación de una rejilla
![Page 7: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/7.jpg)
7
Rejilla
.
Hacer una rejilla de 3x3:
![Page 8: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/8.jpg)
8
Rejilla
.
Hacer una rejilla de 3x3 (código HTML):
![Page 9: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/9.jpg)
9
Rejilla
.
Hacer una rejilla de 3x3 (código CSS):
![Page 10: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/10.jpg)
10
Rejilla
"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020
Columnas dentro de una rejilla:
![Page 11: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/11.jpg)
11
Rejilla
"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020
Renglones dentro de una rejilla:
![Page 12: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/12.jpg)
12
Rejilla
"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020
Espacios entre renglón/columna (Ga):
![Page 13: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/13.jpg)
13
Rejilla
"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020
Ajustando el espacio entre columnas:
![Page 14: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/14.jpg)
14
Rejilla
"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020
Ajustando el espacio entre renglones:
![Page 15: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/15.jpg)
15
Rejilla
"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020
Ajustando el espacio entre columna/renglón:
![Page 16: CSS Grid Layout - xumarhu.net - Portal de Tecnología](https://reader036.vdocuments.net/reader036/viewer/2022070503/62c1500832673532d85a171d/html5/thumbnails/16.jpg)
Rogelio Ferreira Escutia
Profesor / InvestigadorTecnológico Nacional de MéxicoCampus Morelia
xumarhu.net
@rogeplus
https://www.youtube.com/channel/UC0on88n3LwTKxJb8T09sGjg
rogelioferreiraescutia