Maquetación en dos dimensiones.
grid-template-columns: Las columnas de la rejilla y su ancho.
grid-template-areas: Dibuja la maqueta con nombres de zonas, una cadena por fila.
grid-column: En qué columnas se coloca un hijo.
Maquetación en dos dimensiones: filas y columnas a la vez. Se activa con display: grid en el contenedor. La unidad fr es una fracción del espacio libre.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Las columnas de la rejilla y su ancho. repeat(auto-fit, minmax(10rem, 1fr)) hace una rejilla adaptable sin media queries.
Valores: 1fr 1fr, 200px 1fr, repeat(3, 1fr), repeat(auto-fit, minmax(8rem, 1fr))
Las filas de la rejilla y su alto.
Valores: auto 1fr auto, repeat(2, 5rem)
Esencial. Dibuja la maqueta con nombres de zonas, una cadena por fila. Cada hijo se coloca con grid-area: nombre. Un punto (.) es una celda vacía.
Abreviada de filas, columnas y áreas a la vez.
Valores: auto 1fr / 1fr 1fr
El alto de las filas que la rejilla crea sola cuando hay más hijos que celdas definidas (también grid-auto-columns).
Valores: auto, 6rem, minmax(4rem, auto)
El ancho de las columnas que la rejilla crea sola.
Valores: auto, 10rem
Cómo se colocan los hijos sin posición: por filas o por columnas; dense rellena los huecos.
Valores: row, column, row dense
Esencial. En qué columnas se coloca un hijo: de una línea a otra, o cuántas ocupa con span. Abrevia grid-column-start y grid-column-end. 1 / -1 va de la primera a la última línea.
Valores: 1 / 3, span 2, 1 / -1
En qué filas se coloca un hijo. Abrevia grid-row-start y grid-row-end.
Valores: 1 / 3, span 2
Coloca un hijo en una zona con nombre (grid-template-areas) o abrevia fila y columna a la vez.
Valores: cab, 1 / 1 / 3 / 3
Abreviada de todas las propiedades del contenedor de rejilla. Es difícil de leer: mejor las propiedades por separado.
Valores: auto-flow / 1fr 1fr
Código del tema: .rejilla { display: grid; grid-template-columns: repeat(3, 1
Maquetación en dos dimensiones: filas y columnas a la vez. Se activa con display: grid en el contenedor. La unidad fr es una fracción del espacio libre.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Las columnas de la rejilla y su ancho. repeat(auto-fit, minmax(10rem, 1fr)) hace una rejilla adaptable sin media queries.
Valores: 1fr 1fr, 200px 1fr, repeat(3, 1fr), repeat(auto-fit, minmax(8rem, 1fr))
Las filas de la rejilla y su alto.
Valores: auto 1fr auto, repeat(2, 5rem)
Esencial. Dibuja la maqueta con nombres de zonas, una cadena por fila. Cada hijo se coloca con grid-area: nombre. Un punto (.) es una celda vacía.
Abreviada de filas, columnas y áreas a la vez.
Valores: auto 1fr / 1fr 1fr
El alto de las filas que la rejilla crea sola cuando hay más hijos que celdas definidas (también grid-auto-columns).
Valores: auto, 6rem, minmax(4rem, auto)
El ancho de las columnas que la rejilla crea sola.
Valores: auto, 10rem
Cómo se colocan los hijos sin posición: por filas o por columnas; dense rellena los huecos.
Valores: row, column, row dense
Esencial. En qué columnas se coloca un hijo: de una línea a otra, o cuántas ocupa con span. Abrevia grid-column-start y grid-column-end. 1 / -1 va de la primera a la última línea.
Valores: 1 / 3, span 2, 1 / -1
En qué filas se coloca un hijo. Abrevia grid-row-start y grid-row-end.
Valores: 1 / 3, span 2
Coloca un hijo en una zona con nombre (grid-template-areas) o abrevia fila y columna a la vez.
Valores: cab, 1 / 1 / 3 / 3
Abreviada de todas las propiedades del contenedor de rejilla. Es difícil de leer: mejor las propiedades por separado.
Valores: auto-flow / 1fr 1fr