¡css grid layout ya estÁ aquÍ! - igalia · ¡css grid layout ya estÁ aquÍ! manuel rego...
TRANSCRIPT
![Page 1: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/1.jpg)
¡CSS GRID LAYOUTYA ESTÁ AQUÍ!
MANUEL REGO CASASNOVAS ( )@regocas
HTML5Spain / 28 Junio 2016
![Page 2: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/2.jpg)
PRESENTACIÓNActualmente implementando CSS Grid Layout
(Chromium/Blink & Safari/WebKit)
Miembro de Igalia
GRIDS POR TODAS PARTES
![Page 3: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/3.jpg)
GRIDS POR TODAS PARTES
![Page 4: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/4.jpg)
1996
![Page 5: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/5.jpg)
HÅKON WIUM LIE (JUNIO, 1995)
![Page 6: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/6.jpg)
EVOLUCIÓN
![Page 7: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/7.jpg)
<TABLE>
ὣ
![Page 8: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/8.jpg)
FLOAT
ὣ
![Page 9: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/9.jpg)
DISPLAY: INLINE-BLOCK;
ὣ
![Page 10: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/10.jpg)
DISPLAY: TABLE;
ὢ
![Page 11: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/11.jpg)
CSS FRAMEWORKS
ὠ
![Page 12: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/12.jpg)
DISPLAY: FLEX;
ὠ
![Page 13: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/13.jpg)
DISPLAY: GRID;
ὠ
![Page 14: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/14.jpg)
INRODUCCIÓN
![Page 15: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/15.jpg)
CONCEPTOSTítulo
ContenidoMenú
Pie
![Page 16: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/16.jpg)
LÍNEASTítulo
ContenidoMenú
Pie
1 2 31
2
34
![Page 17: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/17.jpg)
TRACKS
![Page 18: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/18.jpg)
TRACKSFILAS
Título
ContenidoMenú
Pie
![Page 19: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/19.jpg)
TRACKSCOLUMNAS
Título
ContenidoMenú
Pie
![Page 20: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/20.jpg)
CELDASTítulo
ContenidoMenú
Pie
![Page 21: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/21.jpg)
ÁREASTítulo
ContenidoMenú
Pie
![Page 22: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/22.jpg)
SYNTAXIS
![Page 23: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/23.jpg)
DISPLAY: GRID;Rompe el flujo habitual de la página web
![Page 24: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/24.jpg)
TAMAÑO DE LOS TRACKS(FILAS/COLUMNAS)
grid-template-columns & grid-template-rows
¡Creación de cajas desde CSS!
![Page 25: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/25.jpg)
TAMAÑO DE LOS TRACKSABCD
.grid display: grid; grid-template-columns: ; grid-template-rows: ;
<div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div></div>
![Page 26: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/26.jpg)
COLOCACIÓN DE ÍTEMSgrid-column & grid-row
Orden del DOM ≠ Orden visual
![Page 27: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/27.jpg)
COLOCACIÓN DE ÍTEMSABC
.grid display: grid; grid: 100px 100px / 200px 200px; .a
<div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div></div>
![Page 28: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/28.jpg)
LÍNEAS DEL GRID CON NOMBREUtilizar identificadores personalizados para las líneas
Una línea puede tener varios nombres
![Page 29: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/29.jpg)
LÍNEAS DEL GRID CON NOMBREABC
.grid display: grid; grid-template-columns: [left] 100px [middle center] 200px [right];
<div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div></div>
![Page 30: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/30.jpg)
ÁREAS DEL GRIDgrid-template-areas
### ###### ###### #### #### ### ######## ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## #### ## ###### ## ## ## ## ## ######## ########### ## ## ## ## ######### ## ## #### ## ## ## ## ## ## ## ## ## ## ## #### ## ###### ###### #### #### ## ## ## ## ##
![Page 31: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/31.jpg)
ÁREAS DEL GRIDABCD
.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;
<div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div> <div class="d">D</div></div>
![Page 32: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/32.jpg)
ALINEAR Y JUSTIFICAREspecificación CSS Box Alignment
¡Centrado horizontal & vertical!
![Page 33: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/33.jpg)
ALINEAR Y JUSTIFICAR ÍTEMSABC
.grid display: grid; grid: 100px 100px / 200px 200px; align-items: ; justify-items: ; .b align-self: ; justify-self: ;
<div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div></div>
![Page 34: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/34.jpg)
ALINEAR Y JUSTIFICAR TRACKSABC
.grid display: grid; grid: 100px 100px / 150px 150px; align-content: ; justify-content: ;
<div class="grid"> <div class="a">A</div> <div class="b">B</div> <div class="c">C</div></div>
![Page 35: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/35.jpg)
SEPARACIÓN ENTRE TRACKSgrid-row-gap & grid-column-gap
![Page 36: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/36.jpg)
SEPARACIÓN ENTRE TRACKSABCDE
.grid display: grid; grid: 100px 100px / 100px 100px 100px; grid-row-gap: ; grid-column-gap: ;
<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>
![Page 37: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/37.jpg)
COLOCACIÓN AUTOMÁTICAgrid-auto-flow
![Page 38: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/38.jpg)
COLOCACIÓN AUTOMÁTICAEtiqueta
CheckboxEnviar formulario
form label input
<form> <label>Etiqueta</label> <input> <label>Checkbox</label> <input type="checkbox"> <button>Enviar formulario</button</form>
![Page 39: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/39.jpg)
REPEAT() AUTOMÁTICOValores auto-fill & auto-fit para repeat()
![Page 40: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/40.jpg)
REPEAT() AUTOMÁTICOABCDE
.grid display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px);
<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>
![Page 41: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/41.jpg)
GRIDS ADAPTATIVOS (RESPONSIVE)El tamaño de los tracks puede ser flexible
Media Queries
![Page 42: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/42.jpg)
GRIDS ADAPTATIVOS (RESPONSIVE).grid display: grid; grid: 200px 1fr / 100px 1fr auto; gridtemplateareas: "header header" "menu main " "menu footer";
@media (maxwidth: 400px) .grid grid: 1fr / 100px 1fr 100px auto; gridtemplateareas: "header" "main " "menu " "footer";
![Page 43: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/43.jpg)
GRIDS ADAPTATIVOS (RESPONSIVE)Título
ContenidoMenú
Pie
![Page 44: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/44.jpg)
FUTURO
![Page 45: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/45.jpg)
SUBGRIDS
Grid Anidado
A B C
D
E
S1 Sub2
S3 Sub4
Subgrid
A B C
D
E
Sub1 Sub2
Sub3 Sub4
![Page 46: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/46.jpg)
SUBGRIDSEtiquetaCheckboxEnviar formulario
ul display: grid; li display: grid; label grid-column: 1;
<form><ul> <li><label>Etiqueta</label><input></li> <li><label>Checkbox</label><input type="checkbox"> <li><button>Enviar formulario</button></li></ul></form>
![Page 47: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/47.jpg)
¿CÓMO FUNCIONAN?
![Page 48: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/48.jpg)
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; gridtemplatecolumns: 200px 1fr auto; gridtemplaterows: 100px auto; .title gridrow: 1; gridcolumn: 2; .nav gridrow: 2; gridcolumn: 1; .main gridrow: 2; gridcolumn: 2; .aside gridcolumn: 3;
![Page 49: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/49.jpg)
GRID VACÍO
![Page 50: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/50.jpg)
COLOCACIÓN DE ÍTEMS
Title
.title grid-row: 1; grid-colum: 2;
![Page 51: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/51.jpg)
COLOCACIÓN DE ÍTEMS
Title
Nav
.nav grid-row: 2; grid-colum: 1;
![Page 52: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/52.jpg)
COLOCACIÓN DE ÍTEMS
Title
Nav Lorem ipsum...
.main grid-row: 2; grid-colum: 2;
![Page 53: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/53.jpg)
COLOCACIÓN DE ÍTEMS
Title
Nav Lorem ipsum...
Ad
.aside grid-colum: 3;
![Page 54: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/54.jpg)
COLOCACIÓN DE ÍTEMS
Title
Nav Lorem ipsum...
Ad
Adword
.aside grid-colum: 3;
![Page 55: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/55.jpg)
COLOCACIÓN DE ÍTEMS
Title
Nav Lorem ipsum...
Ad
Adword
![Page 56: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/56.jpg)
COLUMNA DE TAMAÑO FIJO
Title
Nav Lorem ipsum...
Ad
Adword
200px
![Page 57: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/57.jpg)
COLUMNA BASADA EN CONTENIDO
Title
Nav Lorem ipsum...
Ad 60px
Adword 130px
200px auto
![Page 58: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/58.jpg)
COLUMNA BASADA EN CONTENIDO
Title
Nav Lorem ipsum...
Ad
Adword
200px 130px
![Page 59: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/59.jpg)
COLUMNA FLEXIBLE
Title
Nav Lorem ipsum...
Ad
Adword
200px 130px1fr
![Page 60: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/60.jpg)
COLUMNA FLEXIBLE
Title
Nav Lorem ipsum...
Ad
Adword
200px 130px470px
![Page 61: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/61.jpg)
HACER LAYOUT DE LOS ÍTEMS
Title
Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.
Ad
Adword
200px 130px470px
![Page 62: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/62.jpg)
FILA CON TAMAÑO FIJO
Title
Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.
Ad
Adword
200px 130px470px
100px
![Page 63: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/63.jpg)
FILA BASADA EN EL CONTENIDO
Title
Nav
60px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.
160px
Ad
Adword
60px
200px 130px470px
100px
auto
![Page 64: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/64.jpg)
FILA BASADA EN EL CONTENIDO
Title
Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.
Ad
Adword
200px 130px470px
100px
160px
![Page 65: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/65.jpg)
ESTIRAR ÍTEMS
Title
Nav Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do iusmod tempor incididunt ut labore et dolore magna aliqua.
Ad
Adword
200px 130px470px
100px
160px
![Page 66: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/66.jpg)
RENDIMIENTO
![Page 67: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/67.jpg)
TRACKS FIJOS VS BASADOS ENCONTENIDO
200px es más rápido que auto
![Page 68: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/68.jpg)
TRACKS BASADOS EN CONTENIDO VSFLEXIBLES
auto es más rápido que 1fr
![Page 69: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/69.jpg)
ESTIRAR VERTICALMENTEEl estirado vertical (stretch) en ítems de tamaño
automático es más lento que las otras opciones (ej. start)
Ítem
![Page 70: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/70.jpg)
NO ESTIRAR HORIZONTALMENTEEvitar que los ítems de tamaño automático se estiren
horizontalmente (e.g. start) es mas lento
Ítem
![Page 71: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/71.jpg)
ESTADO
![Page 72: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/72.jpg)
ESPECIFICACIÓN W3CCSS Grid Layout - https://dras.csswg.org/css-grid/
La empezó Microso en 2010
Último Working Dra 19 Mayo 2016
W3C Test Suite
![Page 73: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/73.jpg)
¿PUEDO USAR GRID? ὢ
![Page 74: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/74.jpg)
NAVEGADORES ὠImplementaciónantigua desde IE 10
Con prefijo: -ms
Casi lista Experimental Web PlatformFeatures
Casi como Chrome Activada por defecto enSafari Technology Preview
Casi lista también layout.css.grid.enabled
Polyfill: https://github.com/FremyCompany/css-grid-polyfill
![Page 75: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/75.jpg)
EJEMPLOS by Igalia
by Rachel Andrewhttp://igalia.github.io/css-grid-layout/http://gridbyexample.com/
![Page 76: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/76.jpg)
AGRADECIMIENTOS
y trabajando juntos por mejorar la webIgalia Bloomberg
![Page 77: ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! - Igalia · ¡CSS GRID LAYOUT YA ESTÁ AQUÍ! MANUEL REGO CASASNOVAS (@regocas) HTML5Spain / 28 Junio 2016. PRESENTACIÓN Actualmente implementando](https://reader034.vdocuments.site/reader034/viewer/2022042709/5f40d05d7efe021a041a162b/html5/thumbnails/77.jpg)
¡GRACIAS!Twitter: Correo: Blog:
http://blogs.igalia.com/mrego/