grid-template-columns:5
grid-template-rows:4
Celda1
Celda2
Celda3
Celda4
Celda5
Celda6
grid-row:2/5
Celda7
Celda8
grid-column:4/6
Celda9
Celda10
Celda11
Celda12
Celda13
Celda14
Celda15
Para definir la Grilla:
grid-template-columns / grid-template-rows:
- 3fr 6fr 2fr 3fr: Define 4 columnas o filas dentro contenedor con estas proporciones. (fr = fracción)
- repeat(5, 1fr): Define 5 columnas o filas dentro contenedor de iguales proporciones.
grid-template: rows / columns
Para definir las Celdas:
grid-column / grid-row:
- 2/5: Define que esta celda combinará las columnas o filas desde el límite "2" hasta el límite "5" (2, 3 y 4 como una sola celda).
- 3/-1: Define que esta celda combinará las columnas o filas desde el límite "3" hasta el final como una sola celda.
- 2 / span 3: Define que esta celda combinará las columnas o filas desde la "2" con "3" de extensión (2, 3 y 4 como una sola celda).
- span 3 / 7: Define que esta celda combinará las columnas o filas desde la "4" con "3" de extensión (4, 5 y 6 como una sola celda).
Otros atributos útiles de la Grilla:
gap/column-gap/row-gap: 10px |
Define el espacio entre las Celdas/Columnas/Filas de la Grilla |
grid-auto-rows: 10px |
Define el tamaño de una nueva fila creada de forma implícita en la Grilla |
align-items: start/center/end |
Sirve para alinear verticalmente las Celdas de la Grilla |
justify-items: start/center/end/stretch |
Sirve para alinear horizontalmente las Celdas de la Grilla |
Atributos útiles de las celdas de una Grilla:
align-self: start/center/end |
Sirve para alinear verticalmente las Celdas de la Grilla |
justify-self: start/center/end/stretch |
Sirve para alinear horizontalmente las Celdas de la Grilla |
align-content: start/center/end |
Sirve para alinear verticalmente el contenido de las Celdas de la Grilla |
justify-content: start/center/end/stretch |
Sirve para alinear horizontalmente el contenido de las Celdas de la Grilla |