css grid una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns:...
TRANSCRIPT
CSS GRIDUna aventura que no te puedes perder
Óscar Abad Folgueira
Óscar Abad Folgueira@oabadfol
Desarrollador WordPress en Oh! Yeah DevFreelance dinapyme.comBlog: oscarabadfolgueira.com
¿Qué es CSS GRID?
Modelo de maquetación CSS en base a una rejilla.
Es un estándar.
No son necesarias librerías.
SOPORTE DE NAVEGADORES
Creación de un contenedor Grid
.contenedor{display: grid;
}
.contenedor{display: inline-grid;
}
.contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px;
}
Declarar columnas: grid-template-columns
.contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px
100px 100px 100px 100px 100px 100px;}
Declarar columnas: grid-template-columns
.contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px
100px 100px;}
Declarar columnas: grid-template-columns
.contenedor{ display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px; grid-template-rows: 100px 100px;}
Declarar filas: grid-template-rows
.contenedor{ display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px; grid-template-rows: auto auto;}
Declarar filas: grid-template-rows
.contenedor{ display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto auto auto;}
Establecer filas y columnas: Tamaño variable
.contenedor{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto;}
Establecer filas y columnas: Tamaño variable
.contenedor{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 1fr auto;}
Establecer filas y columnas: Tamaño variable
.contenedor{ display: grid; grid-template-columns: 200px 20% minmax(10%, 2fr) 200px;}
Tamaño máximo y mínimo: minmax
.contenedor{ display: grid; grid-template-columns: 200px max-content minmax(10%, 2fr) max-content;}
Ajustar tamaño a contenido: max-content
.contenedor{ display: grid; grid-template-columns: repeat(4, 20%);}
Repetición de elementos grid: repeat()
.contenedor{ display: grid; grid-template-columns: repeat(8, 1fr);}
Repetición de elementos grid: repeat()
.contenedor{ display: grid; grid-template-columns: repeat(3, 100px 1fr 3rem);}
Repetición de elementos grid: repeat()
.contenedor{ display: grid; grid-template-columns: auto repeat(2, 1fr 80px) 100px 2rem repeat(2, max-content);}
Repetición de elementos grid: repeat()
.contenedor{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);}
Definición de cuadrículas
Terminología
Grid line Grid cell
Row
ColumnGrid Area Grid Track
Grid Item
.contenedor{ display: grid; grid-template-areas:
“izquierda centro derecha”;}.izquierda{ grid-area: izquierda; background-color: #005387;}.centro{ grid-area: centro; background-color: #8cb811;}.derecha{ grid-area: derecha; background-color: #fdb813;}
Nombrando las celdas: grid-template-areas
<div class="contenedor"><div class="izquierda">Izquierda</div><div class="centro">Centro</div><div class="derecha">Derecha</div>
</div>
.container-grid{ display: grid; grid-template-areas:
"cabecera cabecera cabecera cabecera""izquierda contenido contenido derecha""pie pie pie pie";
}.cabecera{ grid-area: cabecera;}.izquierda{ grid-area: izquierda;}.contenido{ grid-area: contenido;}.derecha{ grid-area: derecha;}.pie{ grid-area: pie;}
grid-template-areas
<div class="container"><div class="item cabecera">Header</div><div class="item izquierda">Izquierda</div><div class="item contenido">Contenido</div><div class="item derecha">Derecha</div><div class="item pie">Footer</div>
</div>
Grid Gap - Espaciado .container{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 50px); /* grid-column-gap: 20px; */ /* grid-row-gap: 15px; */ /* column-gap: 20px; row-gap: 15px; */ grid-gap: 15px 20px;}
Alineación horizontal - justify-items
Alineación de lo elementos del grid
justify-items: start | center | end | scretch
Alineación vertical - align-items
align-items: start | center | end | scretch
Alineación horizontal del contenedor - justify-content
justify-content: start | center | end | scretch | space-around | space-between | space-evenly
CSS Grid
PROPIEDADE DES LOS HIJOS/AS
Definición de los elementos
grid-column-startgrid-column-endgrid-row-startgrid-row-end
.item { grid-column-start: <number> | <name> | span <number> | span <name> | auto; grid-column-end: <number> | <name> | span <number> | span <name> | auto; grid-row-start: <number> | <name> | span <number> | span <name> | auto; grid-row-end: <number> | <name> | span <number> | span <name> | auto;}
v
Definición de los elementosgrid-column-startgrid-column-endgrid-row-startgrid-row-end
.elemento{ grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; background-color: purple;}
v
Definición de los elementos
grid-columngrid-row
.elemento{ grid-column: 2 / 4; grid-row: 1 / 3; background-color: purple;}
Definición de los elementos - Ejemplo
<div class="container-grid1"><div class="elemento1 item">Elemento 1</div><div class="elemento2 item">Elemento 2</div><div class="elemento3 item">Elemento 3</div><div class="elemento4 item">Elemento 4</div><div class="elemento5 item">Elemento 5</div>
</div>.container-grid1{ display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 80px); border: 1px solid black;}.elemento1{ grid-column: 2 / 4; grid-row: 1 / 3; background-color: purple;}.elemento2{ grid-column: 5 / 6; grid-row: 1 / 3; background-color: gray;}
.elemento3{ grid-column: 3 / 6; grid-row: 4 / 6; background-color: orange;}.elemento4{ grid-column: 1 / 3; grid-row: 3 / 5; background-color: blue;}.elemento5{ grid-column: 1 / 5; grid-row: 2 / 6; background-color: black; z-index: -1;}
Definición de los elementos - Ejemplo1 2 3 4 5 6
1
2
3
4
5
6
Recursos
A Complete guide to grid: https://css-tricks.com/snippets/css/complete-guide-grid/
Ejemplos presentación en Codepen: https://codepen.io/collection/XKEGLE
CSS Grid Layout - Mozilla: https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout
Grid by example: https://gridbyexample.com/
CSS Grid Cheatsheet: http://grid.malven.co/
CSS GRID!!!! Oh Yeah!!