Conceptos básicos y prácticas para aprender más sobre CSS Grid Layout. Esta presentación fue parte de un taller. Fecha: 08 de Septiembre de 2018

1. CSS GRID LAYOUT
Tu creatividad e imaginación son el límite 08.09.2018
MAYRA ZURITA - @mizrmx
FRONT-END DEVELOPER

2. Qué veremos
1. Un poco de historia
2. Displays - Floats
3. CSS Grid Layout
4. Conceptos básicos
5. Instagram
6. Pinterest
7. Recursos

3. 1. Un poco de historia

5. 2. Display - Float

6. Relative
Floats
Tables
Absolute
Inline-block
Flex

7. 3. CSS Grid Layout

13. Grid Container
Elemento padre donde se
asigna un {display: grid; }

14. Grid Item
Hijos directos de un
Grid container

15. Grid Line
Líneas divisorias
horizontales y verticales

16. Grid Track
Espacio entre dos lineas
adyacentes, filas y columnas

17. Grid Cell
Espacio en dos filas adyacentes
y 2 columnas adyacentes

18. Grid Area
Espacio que rodeado por
cuatro grid lines

20. 3. Conceptos básicos

21. Definiendo columnas
grid-template-columns: N1 N2 N3;
Representa el tamaño que queremos que sean nuestra
columnas, puede ser cualquier unidad de medida

22. Definiendo filas
grid-template-rows: N1 N2;
Se puede especificar el número de filas y columnas
mediante una sintaxis reducida por ejemplo:
grid-template-columns: N1 N2 N3;
grid-template: filas / columnas;

23. Espacio entre filas y columnas
grid-column-gap: N1;
grid-row-gap: N1;
grid-gap: filas columnas;

24. Áreas de contenido
Si vamos a usar un area varias veces debemos colocarla
en la misma fila donde esta la primera

25. Tamaño de las columnas
Se puede escribir en una sola linea:

26. Tamaño de filas dentro de un grid
Se puede escribir en una sola linea:

27. Alineación de contenido

28. Alineación de filas y columnas

29. Instagram

30. Pinterest

31. Recursos
Grid Garden
Grid by example
Sitepoint- Introduction
CSS - Tricks Flexbox Froggy
Developer Mozilla - CSS Grid Layout
Grid Layout

32. ¡GRACIAS!
www.mizrmx.com
@mizrmx
08.09.2018