¡css grid layout ya estÁ aquÍ! - igalia · ¡css grid layout ya estÁ aquÍ! manuel rego...

¡CSS GRID LAYOUTYA ESTÁ AQUÍ!

MANUEL REGO CASASNOVAS ( )@regocas

HTML5Spain / 28 Junio 2016

https://twitter.com/regocas

http://creativecommons.org/licenses/by-sa/4.0/

PRESENTACIÓNActualmente implementando CSS Grid Layout

(Chromium/Blink & Safari/WebKit)

Miembro de Igalia

GRIDS POR TODAS PARTES

GRIDS POR TODAS PARTES

HÅKON WIUM LIE (JUNIO, 1995)

EVOLUCIÓN

<TABLE>

ὣ

FLOAT

ὣ

DISPLAY: INLINE-BLOCK;

ὣ

DISPLAY: TABLE;

ὢ

CSS FRAMEWORKS

ὠ

DISPLAY: FLEX;

ὠ

DISPLAY: GRID;

ὠ

INRODUCCIÓN

CONCEPTOSTítulo

ContenidoMenú

Pie

LÍNEASTítulo

ContenidoMenú

Pie

1 2 31

2

34

TRACKS

TRACKSFILAS

Título

ContenidoMenú

Pie

TRACKSCOLUMNAS

Título

ContenidoMenú

Pie

CELDASTítulo

ContenidoMenú

Pie

ÁREASTítulo

ContenidoMenú

Pie

SYNTAXIS

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

TAMAÑO DE LOS TRACKS(FILAS/COLUMNAS)

grid-template-columns & grid-template-rows

¡Creación de cajas desde CSS!

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>

COLOCACIÓN DE ÍTEMSgrid-column & grid-row

Orden del DOM ≠ Orden visual

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>

LÍNEAS DEL GRID CON NOMBREUtilizar identificadores personalizados para las líneas

Una línea puede tener varios nombres

LÍNEAS DEL GRID CON NOMBREABC

.grid display: grid; grid-template-columns: [left] 100px [middle center] 200px [right];


ÁREAS DEL GRIDgrid-template-areas

### ###### ###### #### #### ### ######## ######## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## #### ## ###### ## ## ## ## ## ######## ########### ## ## ## ## ######### ## ## #### ## ## ## ## ## ## ## ## ## ## ## #### ## ###### ###### #### #### ## ## ## ## ##

Á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>

ALINEAR Y JUSTIFICAREspecificación CSS Box Alignment

¡Centrado horizontal & vertical!

http://dev.w3.org/csswg/css-align/

ALINEAR Y JUSTIFICAR ÍTEMSABC

.grid display: grid; grid: 100px 100px / 200px 200px; align-items: ; justify-items: ; .b align-self: ; justify-self: ;


ALINEAR Y JUSTIFICAR TRACKSABC

.grid display: grid; grid: 100px 100px / 150px 150px; align-content: ; justify-content: ;


SEPARACIÓN ENTRE TRACKSgrid-row-gap & grid-column-gap

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>

COLOCACIÓN AUTOMÁTICAgrid-auto-flow

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>

REPEAT() AUTOMÁTICOValores auto-fill & auto-fit para repeat()

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>

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

Media Queries

http://www.w3.org/TR/css3-mediaqueries/

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";

GRIDS ADAPTATIVOS (RESPONSIVE)Título

ContenidoMenú

Pie

FUTURO

SUBGRIDS

Grid Anidado

A B C

D

E

S1 Sub2

S3 Sub4

Subgrid

A B C

D

E

Sub1 Sub2

Sub3 Sub4

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>

¿CÓMO FUNCIONAN?

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;

GRID VACÍO

COLOCACIÓN DE ÍTEMS

Title

.title grid-row: 1; grid-colum: 2;


Title

Nav

.nav grid-row: 2; grid-colum: 1;


Title

Nav Lorem ipsum...

.main grid-row: 2; grid-colum: 2;


Title

Nav Lorem ipsum...

Ad

.aside grid-colum: 3;


Title

Nav Lorem ipsum...

Ad

Adword

.aside grid-colum: 3;


Title

Nav Lorem ipsum...

Ad

Adword

COLUMNA DE TAMAÑO FIJO

Title

Nav Lorem ipsum...

Ad

Adword

200px

COLUMNA BASADA EN CONTENIDO

Title

Nav Lorem ipsum...

Ad 60px

Adword 130px

200px auto

COLUMNA BASADA EN CONTENIDO

Title

Nav Lorem ipsum...

Ad

Adword

200px 130px

COLUMNA FLEXIBLE

Title

Nav Lorem ipsum...

Ad

Adword

200px 130px1fr

COLUMNA FLEXIBLE

Title

Nav Lorem ipsum...

Ad

Adword

200px 130px470px

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

FILA CON TAMAÑO FIJO

Title


Ad

Adword

200px 130px470px

100px

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

FILA BASADA EN EL CONTENIDO

Title


Ad

Adword

200px 130px470px

100px

160px

ESTIRAR ÍTEMS

Title


Ad

Adword

200px 130px470px

100px

160px

RENDIMIENTO

TRACKS FIJOS VS BASADOS ENCONTENIDO

200px es más rápido que auto

TRACKS BASADOS EN CONTENIDO VSFLEXIBLES

auto es más rápido que 1fr

ESTIRAR VERTICALMENTEEl estirado vertical (stretch) en ítems de tamaño

automático es más lento que las otras opciones (ej. start)

Ítem

NO ESTIRAR HORIZONTALMENTEEvitar que los ítems de tamaño automático se estiren

horizontalmente (e.g. start) es mas lento

Ítem

ESTADO

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

https://drafts.csswg.org/css-grid/

¿PUEDO USAR GRID? ὢ

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

http://windows.microsoft.com/en-us/internet-explorer/

https://www.google.com/chrome/

https://developer.apple.com/safari/download/

https://www.mozilla.org/en-US/firefox/

https://github.com/FremyCompany/css-grid-polyfill

EJEMPLOS by Igalia

by Rachel Andrewhttp://igalia.github.io/css-grid-layout/http://gridbyexample.com/

http://igalia.github.io/css-grid-layout/

http://gridbyexample.com/

AGRADECIMIENTOS

y trabajando juntos por mejorar la webIgalia Bloomberg

http://www.igalia.com/

http://www.bloomberg.com/

¡GRACIAS!Twitter: Correo: Blog:

@[email protected]

http://blogs.igalia.com/mrego/

https://twitter.com/regocas

mailto:[email protected]

http://blogs.igalia.com/mrego/

¡css grid layout ya estÁ aquÍ! - igalia · ¡css grid layout ya estÁ aquÍ! manuel rego...

Documents