Web

CSSGrid Layout

Rogelio Ferreira Escutia

Profesor / InvestigadorTecnológico Nacional de MéxicoCampus Morelia

Conceptos

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.

4

CSS Grid Layout

.

Actualmente no es un estándar, pero se encuentra como un candidato recomendado por la W3C desde el 2017.

5

CSS Grid Layout

.

Soporte 93.83% (febrero 2020):

Creación de una rejilla

7

Rejilla

.

Hacer una rejilla de 3x3:

8

Rejilla

.

Hacer una rejilla de 3x3 (código HTML):

9

Rejilla

.

Hacer una rejilla de 3x3 (código CSS):

10

Rejilla

"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020

Columnas dentro de una rejilla:

11

Rejilla

"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020

Renglones dentro de una rejilla:

12

Rejilla

"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020

Espacios entre renglón/columna (Ga):

13

Rejilla

"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020

Ajustando el espacio entre columnas:

14

Rejilla

"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020

Ajustando el espacio entre renglones:

15

Rejilla

"CSS Grid Layout Module", https://www.w3schools.com/css/css_grid.asp, febrero 2020

Ajustando el espacio entre columna/renglón:

Rogelio Ferreira Escutia

Profesor / InvestigadorTecnológico Nacional de MéxicoCampus Morelia

xumarhu.net

@rogeplus

https://www.youtube.com/channel/UC0on88n3LwTKxJb8T09sGjg

rogeplus@gmail.com

rogelio.fe@morelia.tecnm.mx

rogelioferreiraescutia