CSS Grid Layout:
El futuro ya está aquí

Manuel Rego Casasnovas (@regocas)

PHPVigo / 26 Abril 2017
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;

😅

Introducció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>
                            

Grid implícito

grid-auto-columns & grid-auto-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>
                            
A
B
C
D

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: 100px 1fr auto / 200px 1fr;
    grid-template-areas: "header header"
                         "menu   main  "
                         "menu   footer";
}

@media (max-width: 400px) {
    .grid {
        grid: 100px 1fr 100px auto / 1fr;
        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>
                            

Subgrids

Ejemplo de Subgrids que no puede resolver 'display: contents'

¿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

Estado

Especificación W3C

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

La empezó Microsoft en 2010

Candidate Recommendation 9 Febrero 2017

W3C Test Suite

¿Puedo usar Grid? 😄

¿Puedo usar grid?

Navegadores 😃

Versión 57 Marzo 2017
Versión 10.1 Marzo 2017
Versión 52 Marzo 2017
Implementación antigua desde IE 10.
Con prefijo: -ms

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

Desde ahora mismo

Progressive Enhancement

@supports es tu amigo


@supports (display: grid) {
  ...
}

@supports not (display: grid) {
  ...
}
                        

Recursos

Agradecimientos

Logos de Igalia y Bloomberg

Igalia y Bloomberg trabajando juntos por mejorar la web

¡Gracias!