CSS GRID LAYOUT YA ESTÁ AQUÍ!

Transcripción

1 CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS HTML5Spain / 28 Junio 2016

2 PRESENTACIÓN Actualmente implementando CSS Grid Layout (Chromium/Blink & Safari/WebKit) Miembro de Igalia

3 GRIDS POR TODAS PARTES

4 1996

5 HÅKON WIUM LIE (JUNIO, 1995)

6 EVOLUCIÓN

7 <TABLE>

8 FLOAT

9 DISPLAY: INLINE-BLOCK;

10 DISPLAY: TABLE;

11 CSS FRAMEWORKS

12 DISPLAY: FLEX;

13 DISPLAY: GRID;

14 INRODUCCIÓN

15 CONCEPTOS Título Menú Contenido Pie

16 LÍNEAS Título 2 Menú Contenido 3 4 Pie

17 TRACKS

18 TRACKS FILAS Título Menú Contenido Pie

19 TRACKS COLUMNAS Título Menú Contenido Pie

20 CELDAS Título Menú Contenido Pie

21 ÁREAS Título Menú Contenido Pie

22 SYNTAXIS

23 DISPLAY: GRID; Rompe el flujo habitual de la página web

24 TAMAÑO DE LOS TRACKS (FILAS/COLUMNAS) grid-template-columns& grid-template-rows Creación de cajas desde CSS!

25 TAMAÑO DE LOS TRACKS <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> <div class="d">d</div> </div> A B C D.grid { display: grid; grid-template-columns: ; grid-template-rows: ; }

26 COLOCACIÓN DE ÍTEMS grid-column& grid-row Orden del DOM Orden visual

27 COLOCACIÓN DE ÍTEMS <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div> A B C.grid { display: grid; grid: 100px 100px / 200px 200px; }.a { }

28 LÍNEAS DEL GRID CON NOMBRE Utilizar identificadores personalizados para las líneas Una línea puede tener varios nombres

29 LÍNEAS DEL GRID CON NOMBRE <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div> A B C.grid { display: grid; grid-template-columns: [left] 100px [middle center] 200px [right]; }

30 ÁREAS DEL GRID grid-template-areas ### ###### ###### #### #### ### ######## ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ###### ## ## ## ## ## ######## ## ######### ## ## ## ## ######### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ###### ###### #### #### ## ## ## ## ##

31 ÁREAS DEL GRID <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> <div class="d">d</div> </div> A B C D.grid { display: grid; grid-auto-columns: 100px; grid-auto-rows: 75px; grid-template-areas: "header header" "nav main " "footer footer"; }.a { grid-area: header; }.b { grid-area: main; }.c { grid-area: nav; }.d { grid-area: footer; }

32 ALINEAR Y JUSTIFICAR Especificación CSS Box Alignment Centrado horizontal & vertical!

33 ALINEAR Y JUSTIFICAR ÍTEMS <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div> A B C.grid { display: grid; grid: 100px 100px / 200px 200px; align-items: ; justify-items: ; }.b { align-self: ; justify-self: ; }

34 ALINEAR Y JUSTIFICAR TRACKS <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> </div> A B C.grid { display: grid; grid: 100px 100px / 150px 150px; align-content: ; justify-content: ; }

35 SEPARACIÓN ENTRE TRACKS grid-row-gap& grid-column-gap

36 SEPARACIÓN ENTRE TRACKS <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> <div class="d">d</div> <div class="e">e</div> </div> A B C D E.grid { display: grid; grid: 100px 100px / 100px 100px 100px; grid-row-gap: ; grid-column-gap: ; }

37 COLOCACIÓN AUTOMÁTICA grid-auto-flow

38 COLOCACIÓN AUTOMÁTICA <form> <label>etiqueta</label> <input> <label>checkbox</label> <input type="checkbox"> <button>enviar formulario</butt </form> Etiqueta Checkbox Enviar formulario form { } label { } input { }

39 REPEAT()AUTOMÁTICO Valores auto-fill& auto-fitpara repeat()

40 REPEAT()AUTOMÁTICO <div class="grid"> <div class="a">a</div> <div class="b">b</div> <div class="c">c</div> <div class="d">d</div> <div class="e">e</div> </div> A B C D E.grid { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); }

41 GRIDS ADAPTATIVOS (RESPONSIVE) El tamaño de los tracks puede ser flexible Media Queries

42 GRIDS ADAPTATIVOS (RESPONSIVE).grid { display: grid; grid: 200px 1fr / 100px 1fr auto; grid template areas: "header header" "menu main " "menu footer"; (max width: 400px) {.grid { grid: 1fr / 100px 1fr 100px auto; grid template areas: "header" "main " "menu " "footer"; } }

43 GRIDS ADAPTATIVOS (RESPONSIVE) Título Menú Contenido Pie

44 FUTURO

45 SUBGRIDS Grid Anidado Subgrid A B C A B C D S Sub D Sub Sub E S Sub E Sub Sub

46 SUBGRIDS <form><ul> <li><label>etiqueta</label><input></li> <li><label>checkbox</label><input type="checkbox"> <li><button>enviar formulario</button></li> </ul></form> Etiqueta Checkbox Enviar formu ul { display: grid; } li { display: grid; } label { grid-column: 1; }

47 CÓMO FUNCIONAN?

48 EJEMPLO <div class="grid"> <div class="title">title</div> <div class="nav">nav</div> <div class="main">lorem ipsum...</div> <div class="aside">ad</div> <div class="aside">adword</div> </div>.grid { display: grid; width: 800px; grid template columns: 200px 1fr auto; grid template rows: 100px auto; }.title { grid row: 1; grid column: 2; }.nav { grid row: 2; grid column: 1; }.main { grid row: 2; grid column: 2; }.aside { grid column: 3; }

49 GRID VACÍO

50 COLOCACIÓN DE ÍTEMS Title.title { grid-row: 1; grid-colum: 2; }

51 COLOCACIÓN DE ÍTEMS Title.nav { grid-row: 2; grid-colum: 1; } Nav

52 COLOCACIÓN DE ÍTEMS Title.main { grid-row: 2; grid-colum: 2; } Nav Lorem ipsum

53 COLOCACIÓN DE ÍTEMS Title Ad Nav Lorem ipsum.aside { grid-colum: 3; }

54 COLOCACIÓN DE ÍTEMS Title Ad Nav Lorem ipsum Adword.aside { grid-colum: 3; }

55 COLOCACIÓN DE ÍTEMS Title Ad Nav Lorem ipsum Adword

56 COLUMNA DE TAMAÑO FIJO px Title Ad Nav Lorem ipsum Adword

57 COLUMNA BASADA EN CONTENIDO px auto Title Ad px Nav Lorem ipsum Adword px

58 COLUMNA BASADA EN CONTENIDO px px Title Ad Nav Lorem ipsum Adword

59 COLUMNA FLEXIBLE px fr px Title Ad Nav Lorem ipsum Adword

60 COLUMNA FLEXIBLE px px px Title Ad Nav Lorem ipsum Adword

61 HACER LAYOUT DE LOS ÍTEMS px px px Title Ad Nav Lorem ipsum dolor sit amet consectetur adipiscing elit sed do iusmod tempor incididunt ut labore et dolore magna aliqua Adword

62 FILA CON TAMAÑO FIJO px px px px Title Ad Nav Lorem ipsum dolor sit amet consectetur adipiscing elit sed do iusmod tempor incididunt ut labore et dolore magna aliqua Adword

63 FILA BASADA EN EL CONTENIDO px px px px Title Ad auto Nav px Lorem ipsum dolor sit amet consectetur adipiscing elit sed do iusmod tempor incididunt ut labore et dolore magna aliqua px Adword px

64 FILA BASADA EN EL CONTENIDO px px px px Title Ad px Nav Lorem ipsum dolor sit amet consectetur adipiscing elit sed do iusmod tempor incididunt ut labore et dolore magna aliqua Adword

65 ESTIRAR ÍTEMS px px px px Title Ad px Nav Lorem ipsum dolor sit amet consectetur adipiscing elit sed do iusmod tempor incididunt ut labore et dolore magna aliqua Adword

66 RENDIMIENTO

67 TRACKS FIJOS VS BASADOS EN CONTENIDO 200pxes más rápido que auto

68 TRACKS BASADOS EN CONTENIDO VS FLEXIBLES autoes más rápido que 1fr

69 ESTIRAR VERTICALMENTE El estirado vertical ( stretch) en ítems de tamaño automático es más lento que las otras opciones (ej. start) Ítem

70 NO ESTIRAR HORIZONTALMENTE Evitar que los ítems de tamaño automático se estiren horizontalmente (e.g. start) es más lento Ítem

71 ESTADO

72 ESPECIFICACIÓN W3C CSS Grid Layout - s.csswg.org/css-grid/ La empezó Microso en 2010 Último Working Dra 19 Mayo 2016 W3C Test Suite

73 PUEDO USAR GRID?

74 NAVEGADORES Implementación antigua desde IE 10 Casi lista Casi como Chrome Casi lista también Con prefijo: -ms Experimental Web Platform Features Activada por defecto en Safari Technology Preview layout.css.grid.enabled Polyfill:

75 EJEMPLOS by Igalia by Rachel Andrew

76 AGRADECIMIENTOS Igalia y Bloomberg trabajando juntos por mejorar la web

77 GRACIAS! Correo: Blog: