Grids por todas partes

1996

Håkon Wium Lie (Junio, 1995)

Evolución

<table>

float

display: inline-block;

display: table;

CSS Frameworks

display: flex;

display: grid;

Introducción

Conceptos

Líneas

Tracks

Tracks

Filas

Tracks

Columnas

Celdas

Áreas

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>
                            

Colocación de ítems

grid-column & grid-row

Orden del DOM ≠ Orden visual

Colocación de ítems

<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
                            

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>
                            

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

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>
                            

Alinear y justificar tracks

<div class="grid">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
                            

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>
                            

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>
                            

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>
                            

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

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

¿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

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

Columna basada en contenido

Columna basada en contenido

Columna flexible

Columna flexible

Hacer layout de los ítems

Fila con tamaño fijo

Fila basada en el contenido

Fila basada en el contenido

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? 😄

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

• Mozilla Developer Network (MDN)
• gridbyexample.com & CSS Grid Ask Me Anything (AMA) by Rachel Andrew
• labs.jensimmons.com by Jen Simmons

Agradecimientos

Igalia y Bloomberg trabajando juntos por mejorar la web