css grid layout - xumarhu.net - portal de tecnología
TRANSCRIPT
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
rogelioferreiraescutia