Una presentación sobre Grid CSS. Slides correspondientes al curso https://webtraining.zone/cursos/curso-profesional-de-css-grid

1. Grid CSS

2. ¿Qué aprenderemos?
• Grid CSS
– Display grid
– Columns / rows
– Auto-flow
– Sizing, Span, Start / end
– Ejemplos con layouts
– Responsive Web Design (RWD)

3. Historia

4. El problema original

5. ¿Cómo haciamos las cosas antes?
Sin layout
• Claro eso funcionó el primer año…
http://info.cern.ch/hypertext/WWW/TheProject.html

6. ¿Cómo haciamos las cosas antes?
Tablas
• Sin conocimientos avanzados
• Table hell !

7. ¿Cómo mejoró la situación?
Divs + Floats
• Estructuras más complejas
• Compatibles con todos los browsers

8. ¿Qué opciones “nuevas” tenemos?
Flexbox
• 1-dimension
• Posible re-ordenar items
• Excelente para centrado vertical

9. Un ejemplo de un grid con flexbox
Flexbox Grid, Bootstrap 4
http://flexboxgrid.com/
http://getbootstrap.com/

10. Ejercicio #1
¿Y mis floats?

11. Ejercicio #2
Display Grid

12. Template columns & rows

13. Ejercicio #3
Template Columns & Rows

14. Auto flow

15. Ejercicio #4
Auto flow

16. Sizing

17. Ejercicio #5
Sizing

18. Span

19. Ejercicio #6
Span

20. Start / End

21. Ejercicio #7
Start / End

22. Responsive Web
Design
http://alistapart.com/article/responsive-web-design

23. 3 pilares
Grid flexible
Media queries
Images (auto ajustables)
¿Cómo identificamos RWD?

24. Ejercicio #8
Responsividad
Grid CSS + @media queries

25. ¿Cómo identificamos RWD?

26. Line names

27. Ejercicio #9
Nombrando líneas

28. Grid areas

29. Ejercicio #10
Áreas con nombre

30. Ejercicio #11
Agregando contenido real

31. @media

32. ¿Y los Legacy Browsers?
Especificación “antigua”
https://github.com/codler/Grid-Layout-Polyfill
Especificación actual
https://github.com/FremyCompany/css-grid-polyfill/
@supports para otros browsers
https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
https://www.youtube.com/watch?v=7kVeCqQCxlk

33. Más información
A Complete Guide to Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
Responsive Web Design
http://alistapart.com/article/responsive-web-design
CSS Grid Layout
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
CSS Grid Changes Everything About Web Layouts: WordCamp Europe 2017
https://www.youtube.com/watch?v=7kVeCqQCxlk

34. Más información
Grid by Example
https://gridbyexample.com/
Grid "fallbacks" and overrides
https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
CSS Grid Layout and Progressive Enhancement
https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

35. ¡Gracias!
Alex Arriaga
http://webtraining.zone/
@alex_arriaga_m