¡CSS Grid Layout
ya está aquí!

Manuel Rego Casasnovas (@regocas)

HTML5Spain / 28 Junio 2016
Creative Commons Attribution-ShareAlike

Presentación

Actualmente implementando CSS Grid Layout (Chromium/Blink & Safari/WebKit)

Miembro de Igalia

Logo de Igalia

Grids por todas partes

Página web del New York Times

1996

Página web del New York Times en 1996

Håkon Wium Lie (Junio, 1995)

Correo de Håkon Wium Lie a www-style en Juno de 1995

Evolución

<table>

😱

float

😰

display: inline-block;

😵

display: table;

😠

CSS Frameworks

😏

display: flex;

😊

display: grid;

😅

Inroducción

Conceptos

Título
Contenido
Menú
Pie

Líneas

Título
Contenido
Menú
Pie
1
2
3
1
2
3
4

Tracks

Tracks

Filas

Título
Contenido
Menú
Pie

Tracks

Columnas

Título
Contenido
Menú
Pie

Celdas

Título
Contenido
Menú
Pie

Áreas

Título
Contenido
Menú
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 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

Colocación de ítems

grid-column & grid-row

Orden del DOM ≠ Orden visual

Accessibilidad

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

Líneas del grid con nombre

Utilizar identificadores personalizados para las líneas

Una línea puede tener varios nombres

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

Áreas del grid

grid-template-areas

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

Á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

Alinear y justificar

Especificación CSS Box Alignment

¡Centrado horizontal & vertical!

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

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

Separación entre tracks

grid-row-gap & grid-column-gap

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

Colocación automática

grid-auto-flow

Colocación automática


<form>
    <label>Etiqueta</label>
    <input>
    <label>Checkbox</label>
    <input type="checkbox">
    <button>Enviar formulario</button>
</form>
                            

repeat() automático

Valores auto-fill & auto-fit para repeat()

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

Grids adaptativos (responsive)

El tamaño de los tracks puede ser flexible

Media Queries

Grids adaptativos (responsive)


.grid {
    display: grid;
    grid: 200px 1fr / 100px 1fr auto;
    grid-template-areas: "header header"
                         "menu   main  "
                         "menu   footer";
}

@media (max-width: 400px) {
    .grid {
        grid: 1fr / 100px 1fr 100px auto;
        grid-template-areas: "header"
                             "main  "
                             "menu  "
                             "footer"; }
}
                        

Grids adaptativos (responsive)

Futuro

Subgrids

Ejemplo grid anidado vs Subgrid

Subgrids


<form><ul>
    <li><label>Etiqueta</label><input></li>
    <li><label>Checkbox</label><input type="checkbox"></li>
    <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;
         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; }
                        

Grid vacío

Grid vacío

Colocación de ítems

Colocación de ítems

Colocación de ítems

Colocación de ítems

Colocación de ítems

Colocación de ítems

Colocación de ítems

Colocación de ítems

Colocación de ítems

Colocación de ítems

Colocación de ítems

Colocación de ítems

Columna de tamaño fijo

Dimensionar columna de tamaño fijo

Columna basada en contenido

Comprobar columna basada en contenido

Columna basada en contenido

Dimensionar columna basada en contenido

Columna flexible

Comprobar tamaño de la columna flexible

Columna flexible

Dimensionar columna flexible

Hacer layout de los ítems

Hacer layout de los ítems

Fila con tamaño fijo

Dimensionar fila con tamaño fijo

Fila basada en el contenido

Comprobar fila basada en el contenido

Fila basada en el contenido

Dimensionar fila basada en el contenido

Estirar ítems

Estirar ítems

Rendimiento

Tracks fijos vs basados en contenido

200px es más rápido que auto

60% más rápido (20x10 grid)

100% más rápido (100x20 grid)

140% más rápido (100x100 grid)

Tracks basados en contenido vs flexibles

auto es más rápido que 1fr

40% más rápido

Estirar verticalmente

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

Ítem

20% más lento

No estirar horizontalmente

Evitar que los ítems de tamaño automático se estiren horizontalmente (e.g. start) es ḿas lento

Ítem

10% más lento

Estado

Especificación W3C

CSS Grid Layout - https://drafts.csswg.org/css-grid/

La empezó Microsoft en 2010

Último Working Draft 19 Mayo 2016

W3C Test Suite

¿Puedo usar Grid? 😭

¿Puedo usar grid?

Navegadores 😃

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

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

Ejemplos

Agradecimientos

Logos de Igalia y Bloomberg

Igalia y Bloomberg trabajando juntos por mejorar la web

¡Gracias!