Todas las propiedades comunes de CSS Grid, agrupadas por dónde se aplican: el contenedor, el elemento y las unidades de tamaño. Cada fila empareja la propiedad con sus valores comunes.
Grid coloca los elementos en dos dimensiones: filas y columnas a la vez. Establece display: grid en el padre, define pistas con grid-template-columns y grid-template-rows, y sitúa los hijos en celdas. Usa grid para diseños de página y de tarjetas; usa flexbox para barras de una sola dimensión. Los dos se combinan libremente.
Tabla de referencia · 33 entradas
CSS GridExplained
33 of 33 rows
Contenedor
grid | inline-grid
Convierte el elemento en un contenedor grid.
1fr 1fr | repeat(3, 1fr) | 200px 1fr
Define las columnas y sus anchos.
auto 1fr auto
Define las filas y sus alturas.
[main-start] 1fr [main-end]
Nombra líneas de la rejilla en una plantilla y coloca elementos por esos nombres.
1rem | 8px 16px
Espacio entre filas y columnas.
"header header" "nav main"
Nombra celdas para una colocación legible.
"head head" 64px "nav main" 1fr / 200px 1fr
Establece filas, columnas y áreas en una sola forma abreviada.
repeat(2, 1fr) / auto-flow 80px
Establece todas las propiedades de pistas y grid-auto-flow en una sola declaración.
minmax(80px, auto)
Establece la altura de las filas que la plantilla no define.
120px | minmax(0, 1fr)
Establece el ancho de las columnas que la plantilla no define.
row | column | row dense
Elige el eje para los elementos sin colocar; dense rellena los huecos anteriores.
start | center | end | stretch
Alinea cada elemento dentro de su celda en el eje de las filas.
start | center | end | stretch
Alinea cada elemento dentro de su celda en el eje de las columnas.
center | start end
Establece align-items y justify-items en una sola declaración.
start | center | space-between
Alinea la rejilla de pistas dentro del contenedor en el eje de las filas.
start | center | space-between
Alinea la rejilla de pistas dentro del contenedor en el eje de las columnas.
center | end start
Establece align-content y justify-content en una sola declaración.
Elemento
1 / 3 | span 2
Coloca un elemento en columnas o lo extiende a lo largo de ellas.
1 / 2 | span 3
Coloca un elemento en filas o lo extiende a lo largo de ellas.
grid-column: 2 / -1
Cuenta líneas desde el final de la rejilla; -1 es la última línea.
header | 1 / 1 / 2 / 3
Nombra o coloca por completo un elemento en una sola forma abreviada.
start | center | end | stretch
Alinea solo este elemento dentro de su celda en el eje de las filas.
start | center | end | stretch
Alinea solo este elemento dentro de su celda en el eje de las columnas.
center | start end
Establece align-self y justify-self en una sola declaración.
Unidades de tamaño
1fr | 2fr
Una fracción del espacio libre de la pista.
auto | 1fr auto
Dimensiona una pista por su contenido; la alineación puede estirarla.
min-content | max-content
Dimensiona una pista según su contenido más pequeño o más grande.
fit-content(180px)
Dimensiona una pista por su contenido, pero nunca más allá del límite indicado.
minmax(200px, 1fr)
Limita una pista entre un mínimo y un máximo.
repeat(4, 1fr)
Repite un patrón de pistas sin escribir cada una.
repeat(auto-fit, minmax(120px, 1fr))
Añade tantas pistas como caben; auto-fit contrae las vacías.
grid-template-columns: subgrid
Hace que una rejilla anidada comparta las pistas y los nombres de línea del padre.
grid-template-rows: masonry
Experimental: empaqueta elementos en columnas por altura, en lugar de filas fijas.