CSS Grid Layout, ¡Está vivo!
Open Source Weekends, Madrid – 10 de Junio, 2017
Ignacio Villanueva
Front-end Developer en especializado en arquitectura, front-end performance y responsive web design.
Podcasting en WeCodeSign y organizo Open Source Weekends
Feature Queries
Writing Mode
Text Orientation
Valores
mixed;
upright;
sideways-right;
sideways;
use-glyph-orientation;
CSS Box Alignment
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
z-index
Hay valores que son un descriptionhand de otros dos. Si se omite uno, el descriptionhand 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;
}
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";
}
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>;
}
grid-gap
VALORES:
- <grid-row-gap> <grid-column-gap>
.contenedor {
grid-gap: tamaño;
}
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
}
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;
}
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;
}
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;
}
Recursos
Recursos para profundizar en CSS Grid Layout
¿A quién seguir?
Gente que habla habitualmente de CSS.