![Page 1: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/1.jpg)
CSS GRIDUna aventura que no te puedes perder
Óscar Abad Folgueira
![Page 2: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/2.jpg)
Óscar Abad Folgueira@oabadfol
Desarrollador WordPress en Oh! Yeah DevFreelance dinapyme.comBlog: oscarabadfolgueira.com
![Page 3: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/3.jpg)
¿Qué es CSS GRID?
![Page 4: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/4.jpg)
Modelo de maquetación CSS en base a una rejilla.
Es un estándar.
No son necesarias librerías.
![Page 5: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/5.jpg)
SOPORTE DE NAVEGADORES
![Page 6: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/6.jpg)
Creación de un contenedor Grid
.contenedor{display: grid;
}
.contenedor{display: inline-grid;
}
![Page 7: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/7.jpg)
.contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px;
}
Declarar columnas: grid-template-columns
![Page 8: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/8.jpg)
.contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px
100px 100px 100px 100px 100px 100px;}
Declarar columnas: grid-template-columns
![Page 9: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/9.jpg)
.contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px
100px 100px;}
Declarar columnas: grid-template-columns
![Page 10: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/10.jpg)
.contenedor{ display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px; grid-template-rows: 100px 100px;}
Declarar filas: grid-template-rows
![Page 11: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/11.jpg)
.contenedor{ display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px; grid-template-rows: auto auto;}
Declarar filas: grid-template-rows
![Page 12: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/12.jpg)
.contenedor{ display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto auto auto;}
Establecer filas y columnas: Tamaño variable
![Page 13: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/13.jpg)
.contenedor{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto;}
Establecer filas y columnas: Tamaño variable
![Page 14: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/14.jpg)
.contenedor{ display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100px 1fr auto;}
Establecer filas y columnas: Tamaño variable
![Page 15: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/15.jpg)
.contenedor{ display: grid; grid-template-columns: 200px 20% minmax(10%, 2fr) 200px;}
Tamaño máximo y mínimo: minmax
![Page 16: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/16.jpg)
.contenedor{ display: grid; grid-template-columns: 200px max-content minmax(10%, 2fr) max-content;}
Ajustar tamaño a contenido: max-content
![Page 17: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/17.jpg)
.contenedor{ display: grid; grid-template-columns: repeat(4, 20%);}
Repetición de elementos grid: repeat()
![Page 18: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/18.jpg)
.contenedor{ display: grid; grid-template-columns: repeat(8, 1fr);}
Repetición de elementos grid: repeat()
![Page 19: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/19.jpg)
.contenedor{ display: grid; grid-template-columns: repeat(3, 100px 1fr 3rem);}
Repetición de elementos grid: repeat()
![Page 20: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/20.jpg)
.contenedor{ display: grid; grid-template-columns: auto repeat(2, 1fr 80px) 100px 2rem repeat(2, max-content);}
Repetición de elementos grid: repeat()
![Page 21: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/21.jpg)
.contenedor{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);}
Definición de cuadrículas
![Page 22: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/22.jpg)
Terminología
Grid line Grid cell
Row
ColumnGrid Area Grid Track
Grid Item
![Page 23: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/23.jpg)
.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>
![Page 24: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/24.jpg)
.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>
![Page 25: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/25.jpg)
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;}
![Page 26: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/26.jpg)
Alineación horizontal - justify-items
Alineación de lo elementos del grid
justify-items: start | center | end | scretch
![Page 27: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/27.jpg)
Alineación vertical - align-items
align-items: start | center | end | scretch
![Page 28: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/28.jpg)
Alineación horizontal del contenedor - justify-content
justify-content: start | center | end | scretch | space-around | space-between | space-evenly
![Page 29: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/29.jpg)
CSS Grid
PROPIEDADE DES LOS HIJOS/AS
![Page 30: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/30.jpg)
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;}
![Page 31: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/31.jpg)
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;}
![Page 32: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/32.jpg)
v
Definición de los elementos
grid-columngrid-row
.elemento{ grid-column: 2 / 4; grid-row: 1 / 3; background-color: purple;}
![Page 33: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/33.jpg)
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;}
![Page 34: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/34.jpg)
Definición de los elementos - Ejemplo1 2 3 4 5 6
1
2
3
4
5
6
![Page 35: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/35.jpg)
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/
![Page 36: CSS GRID Una aventura que no te puedes perder....contenedor{display: grid;grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;} Declarar columnas: grid-template-columns.contenedor{display:](https://reader036.vdocumento.com/reader036/viewer/2022071603/613e5e3f59df642846167c5d/html5/thumbnails/36.jpg)
CSS GRID!!!! Oh Yeah!!