CSS Grid Layout, ¡Está vivo!

Open Source Weekends, Madrid – 10 de Junio, 2017

Ignacio ;)

Ignacio Villanueva

Front-end Developer en especializado en arquitectura, front-end performance y responsive web design.

Podcasting en WeCodeSign y organizo Open Source Weekends

WeCodeSign Podcast's Logo Open Source Weekends Podcast's Logo

¿Quiéres saber más?

Documentación: Writing Mode

Valores

mixed;

upright;

sideways-right;

sideways;

use-glyph-orientation;

Preguntas habituales

1 - ¿Compite con Flexbox?

No: Flexbox: 1 dirección. Grid 2

2 - CSS Grid funciona sobre el contenedor, no sobre el item


3 - CSS Grid respeta el writing-mode (LTR, RTL...)

Por en grid se escriben cosas como que es grid-column-start ya que no es igual aquí que en otros paises

4 - Autoplacement - https://codepen.io/rachelandrew/pen/Opaopw

Crear elementos que por definición ocupen una cantidad de 2 columnas en especial y se autocoloquen es tan sencillo como lo siguiente

              .box {
                grid-column: auto / span 4;
              }
            

5 - Responsive Grid - https://codepen.io/rachelandrew/pen/gmQdgz

6 - CSS Fallback - https://codepen.io/rachelandrew/pen/jBQpXv

Float no funciona dentro de grid así que si usamos floats no tenemos que usar feature queries para sobre escribirlo

7 - Feature queries

Lo habitual que hay que sobreescribir dentro de feature queries son widths y margins

8 - Ojo con Autoprefixer y la implementación de Grid en IExplorer y primeras versiones de Edge

¿Y quién ha sido el último en implementar CSS Grid Layout como siempre?

Conceptos Básicos 1/2

Grid Container

Grid Item

Grid Line

Grid Track: Espacio entre dos líneas

Grid Cell: Espacio entre dos líneas de fila adyacentes y dos líneas de columna adyacente.

Grid Area: Espacio rodeado por cuatro lineas.

Conceptos Básicos 2/2

1     2      3      4     5
+----+-+----+-+----+-+----+ 1
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+ +----+ +----+ +----+
+----+ +----+ +----+ +----+ 2
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+ +----+ +----+ +----+
+----+ +----+ +----+ +----+ 3
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+ +----+ +----+ +----+
+----+ +----+ +----+ +----+ 4
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+ +----+ +----+ +----+
+----+ +----+ +----+ +----+ 5
|    | |    | |    | |    |
|    | |    | |    | |    |
+----+-+----+-+----+-+----+ 6
            

¡Cosas importantes!

minmax()

auto-fill

auto-fit

.

fr

span

nombre de lineas/areas

Problemas en Sass

z-index

Hay valores que son un shorthand de otros dos. Si se omite uno, el shorthand asignará el valor declarado al segundo (el omitido)

column, float, clear, and vertical-align no afectan al grid container.

Las líneas pueden tener varios nombre [row1-end row2-start]

¿Qué soporte tiene en los navegadores?

CSS Grid Layout support (caniuse.com)

Contenedor

Índice

            display
            grid-template-columns
              grid-template-columns: repeat(number-of-times, width);
              grid-template-columns: number repeat(number-of-times, width) number;
              grid-template-columns: repeat(number-of-times, width width);
              grid-template-columns: repeat(number-of-times, [col] width);
            grid-template-rows
              grid-template-columns: repeat(number-of-times, [row] width);
            grid-template-areas
            grid-template
            grid-column-gap
            grid-row-gap
            grid-gap
            justify-items
            align-items
            justify-content
            align-content
            grid-auto-columns
            grid-auto-rows
            grid-auto-flow
            grid
          

display

VALORES:

grid

inline-grid

subgrid

                .contenedor {
                  display: grid | inline-grid | subgrid;
                }
                

grid-template-columns - grid-template-rows

VALORES:

- <track-size>

- <line-name>

                .contenedor {
                  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
                  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
                }

                .contenedor {
                  grid-template-columns: 100px 100px 300px 20% 1fr;
                  grid-template-rows: 100px 100px 100px;
                }
                

Ejemplo en CodePen

grid-template-areas

VALORES:

- <grid-area-name>

- .

- none

                .item-a {
                  grid-area: header;
                }
                .item-b {
                  grid-area: main;
                }
                .item-c {
                  grid-area: sidebar;
                }
                .item-d {
                  grid-area: footer;
                }

                .contenedor {
                  grid-template-columns: 1fr 1fr 1fr 1fr;
                  grid-template-rows: auto;
                  grid-template-areas: 
                    "header header header header"
                    "main main . sidebar"
                    "footer footer footer footer";
                }
                

Ejemplo en CodePen

grid-template

VALORES:

- none

- subgrid

- grid-template-rows / grid-template-columns

                .contenedor {
                  grid-template: none | subgrid | grid-template-rows / grid-template-columns;
                }

                .contenedor {
                  grid-template-rows: [fila-inicio] 25px [fila-fin row2-inicio] 25px [row2-fin];
                  grid-template-columns: auto 50px auto;
                  grid-template-areas: 
                    "header header header" 
                    "footer footer footer";
                }
                

grid-column-gap - grid-row-gap

VALORES:

- tamaño

                .contenedor {
                  grid-column-gap: <tamaño>;
                  grid-row-gap: <tamaño>;
                }
                

Ejemplo en CodePen

grid-gap

VALORES:

- <grid-row-gap> <grid-column-gap>

                .contenedor {
                  grid-gap: tamaño;
                }
                

Ejemplo en CodePen

justify-items

fila

VALORES:

- start

- end

- center

- stretch

                .contenedor {
                  justify-items: start | end | center | stretch;
                }
                

align-items

columna

VALORES:

- start

- end

- center

- stretch

                .contenedor {
                  align-items: start | end | center | stretch;
                }
                

justify-content

fila

VALORES:

- start

- end

- center

- stretch

- space-around

- space-between

- space-evenly

                .contenedor {
                  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;  
                }
                

align-content

columna

VALORES:

- start

- end

- center

- stretch

- space-around

- space-between

- space-evenly

                .contenedor {
                  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
                }
                

grid-auto-columns y grid-auto-rows

VALORES:

- tamaño del track

                .contenedor {
                  grid-auto-columns: tamaño del track ...;
                  grid-auto-rows: tamaño del track ...;
                }

                .contenedor {
                  grid-template-columns: 60px 60px;
                  grid-template-rows: 90px 90px
                }
                

Ejemplo en CodePen

grid-auto-flow

Dense puede causar que el orden de los items no sea el mismo que en el DOM

VALORES:

- row

- column

- dense

                .contenedor {
                  grid-auto-flow: row | column | row dense | column dense
                }

                <section class="contenedor"
                   <div class="item-a">item-a</div>
                   <div class="item-b">item-b</div>
                   <div class="item-c">item-c</div>
                   <div class="item-d">item-d</div>
                   <div class="item-e">item-e</div>
                </section>

                .contenedor {
                  display: grid;
                  grid-template-columns: 1fr 200px 200px 200px 1fr;
                  grid-template-rows: repeat(2, 200px);
                  grid-auto-flow: row;
                }
                

Ejemplo en CodePen

grid

VALORES:

- none

- grid-template-rows / grid-template-columns

- grid-auto-flow [grid-auto-rows [ / grid-auto-columns] ]

                .contenedor {
                  grid: none | grid-template-rows / grid-template-columns | grid-auto-flow [grid-auto-rows [ / grid-auto-columns]];
                }

                .contenedor {
                  grid-template-rows: 200px auto;
                  grid-template-columns: 1fr auto 1fr;
                  grid-template-areas: none;
                }
                

Ejemplo en CSS-Tricks

Items

Índice

            grid-column-start
            grid-column-end
            grid-row-start
            grid-row-end
            grid-column
            grid-row
            grid-area
            justify-self
            align-self
          

grid-column-start - grid-column-end
grid-row-start - grid-row-end

VALORES:

- <línea>

- span <número>

- span <nombre>

- auto dense

                .item-a {
                  grid-column-start: 2;
                  grid-column-end: five;
                  grid-row-start: row1-start
                  grid-row-end: 3
                }
                

grid-column - grid-row

VALORES:

- <start-line> / <end-line>

                .item-c {
                  grid-column: 3 / span 2;
                  grid-row: third-line / 4;
                }
                

grid-area

VALORES:

- <name>

- <row-start> / <column-start> / <row-start> / <column-end>

                .item {
                  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
                }

                item-d {
                  grid-area: header
                }
                

justify-self

fila

VALORES:

- start

- end

- center

- stretch

                .item {
                  justify-self: start | end | center | stretch;
                }

                .item-a {
                  justify-self: start;
                }
                

align-self

columna

VALORES:

- start

- end

- center

- stretch

                .item {
                  align-self: start | end | center | stretch;
                }

                .item-a {
                  align-self: start;
                }
                

¿A quién seguir?

Gente que habla habitualmente de CSS.

¿Alguna pregunta?