Curso Grid CSS
0 recomendaciones189 vistas
Este documento presenta una introducción a CSS Grid Layout. Explica conceptos clave como display grid, columnas y filas, auto-flow, tamaño, span, start/end, y diseño web responsivo. También incluye ejemplos prácticos para ilustrar estas características y comparaciones con soluciones de layout anteriores como tablas y floats.
Curso Grid CSS
- 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
- 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?
- 12. Template columns & rows
- 13. Ejercicio #3 Template Columns & Rows
- 14. Auto flow
- 16. Sizing
- 18. Span
- 20. Start / End
- 21. Ejercicio #7 Start / End
- 23. 3 pilares Grid flexible Media queries Images (auto ajustables) ¿Cómo identificamos RWD?
- 24. Ejercicio #8 Responsividad Grid CSS + @media queries
- 26. Line names
- 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