Aprendamos CSS Grid Layout

Taller teórico-práctico preparado para Women Who Code Santiago acerca de CSS Grid Layout.

Transcript

1. Aprendamos CSS Grid Layout Taller práctico por Daniela Gattoni para #WomenWhoCode Santiago twitter: @danigattoni_ github.com/dgattoni codepen.io/danigattoni
2. CSS CSS o Cascading Style Sheets describe como los elementos HTML son desplegados en pantalla, papel u otro medio. CSS puede controlar el diseño de múltiples páginas web a través de un archivo con extensión .css .selector { propiedad: valor; }
3. Evolución de Layouts en CSS hasta hoy: Desde los inicios de la web hemos intentado desde: webs con ningún método de diagramación. Tablas en HTML. propiedad CSS float: left | right Framework (Bootstrap, Foundation,…etc) Flexbox Grid Layout (2017)
4. Algunos datos del desarrollo de CSS Grid Layout: • El borrador de la especificación de Grid se publicó en abril de 2011. • Tres de los cuatro autores fueron de Microsoft y la primera Vista previa de la plataforma IE10. • A lo largo de 6 años, la especificación ha evolucionado, algunos browser han actualizado a la última versión, otros se han quedado atrás.
5. Status & Browser • https://gridbyexample.com/browsers/
6. CSS Grid Layout? • Nace de la necesidad de reducir la complejidad a la hora de diagramar los elementos de una pagina web. • Es un método de diseño CSS diseñado para la diagramación Bidimensional de elementos en una Página web. • Divide una página en regiones principales. • Nos permite crear, posicionar y alinear elementos en filas y columnas (rows, columna)
7. https://twitter.com/smashingmag/status/907936156368752640
8. Grid vs Flexbox… • es Grid competencia de Flexbox? No, es una especificación complementaria que trabaja con otras técnicas existentes, ya sea flexbox u otros métodos existentes de diagramación web.
9. Grid vs Flexbox… • Flexbox es esencialmente para colocar ítems en una dimensión - en una fila Ó una columna. Grid es para colocar ítems en dos dimensiones - filas Y columnas. - Rachel Andrew, https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/
10. Terminología en Grid • Grid Lines • Grid Tracks (Grid-row, Grid-column) • Grid Cell • Grid Area • Gutters • Implicit/Explicit Grid
11. Grid Lines Grid Lines son líneas que forman la Grilla. Éstos pueden ser horizontales o verticales. Podemos referirnos a ellos por número, o por nombre. Este caso tenemos una Grid de 2 filas y 3 columnas. 1 2 3 1 2 3 4 -1 -2 -3 -4 -1 -2 -3
12. Grid Cell Una celda de Grid es el espacio entre 4 líneas de cuadrícula. Por lo tanto, es la unidad más pequeña de nuestra red que está disponible para colocar un elemento. Conceptualmente es como una celda de tabla.
13. Grid Tracks un Grid Track es el espacio entre dos Líneas de la Grilla, ya sea horizontal o vertical.
14. Grid Row Una Grid row es un track horizontal en CSS Grid Layout
15. Grid Column Una Grid columna es un track vertical en un layout de CSS Grid.
16. Grid Area Un área de Grid es creada a partir de 1 o más Grid Cells, y está limitada por 4 grid lines en cada lado del area.
17. Gutter Los tracks están separados entre si mediante grid- gap, tanto para columnas como filas.
18. Explicit / Implicit Grid •si creas una Grid, todos los elementos hijos se colocarán uno a uno en cada celda de la Grid. •Si creamos filas adicionales utilizando la propiedad grid-template-rows, la cuadrícula continuará colocando elementos en estas filas. •Pero, que pasa si ubicamos un elemento en una fila que no existe?…Si la Grid no tiene suficientes filas en la cuadrícula explícita para colocar todos los elementos, se crearán nuevas filas implícitas. (lo mismo con columnas)
19. a considerar… •Las áreas de una Grid solamente pueden ser rectángulos, no polígonos arbitrarios.
20. durante el taller práctico… • Crearemos un layout en HTML5. • Usaremos diversas técnicas de Diagramación que ofrece Grid. • Para adaptar la Grid en diferentes pantallas usaremos Media Queries. • En navegadores que no soporten Grid usaremos Feature Query para informar al usuario.
21. durante el taller práctico… image source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
22. a codear! https://codepen.io/
23. Esta presentación y todos los links recomendados en mi Toby Collection >> https://www.gettoby.com/p/pbq5v5552mc1
24. Aprendamos CSS Grid Layout Taller práctico por Daniela Gattoni para #WomenWhoCode Santiago twitter: @danigattoni_ github.com/dgattoni codepen.io/danigattoni