Contenedor Grid CSS
La intro de Grid convirtió a los padres en rejillas. Esta lección se queda en el contenedor: define pistas, pon gap, alinea ítems dentro de las celdas y empaqueta la rejilla cuando queda espacio libre. El span de ítems y las áreas con nombre esperan a Grid Items y Grid Areas.
Una caja de herramientas del contenedor grid
📊 Contenedor grid de un vistazo
| Propiedad | Trabajo diario |
|---|---|
grid-template-columns |
Define los tamaños de las pistas de columna |
grid-template-rows |
Define los tamaños de las pistas de fila |
gap |
Canalizaciones entre pistas |
justify-items / align-items |
Alinea cada ítem dentro de su celda (eje inline / block) |
justify-content / align-content |
Posiciona toda la rejilla cuando es más pequeña que el contenedor |
grid-auto-flow |
Controla el orden de auto-colocación (row o column) |
Dibuja primero las pistas. Luego decide cómo alinean las celdas su contenido, y solo después cómo debe comportarse el espacio sobrante alrededor de toda la rejilla.
Pistas de plantilla — columnas y filas
grid-template-columns y grid-template-rows bocetan la rejilla. Mezcla fr, longitudes y repeat() para tableros cotidianos.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
min-height: 16rem;
}
gap — mantén las canalizaciones honestas
gap (o row-gap / column-gap) separa pistas sin trucos de margin en cada hijo.
.board {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 1.25rem;
}
justify-items y align-items — dentro de la celda
Estas alinean cada ítem dentro de su celda. justify-items en el eje inline; align-items en el eje block. No las confundas con el empaquetado de contenido.
.board {
display: grid;
grid-template-columns: repeat(2, 8rem);
justify-items: center;
align-items: center;
gap: 0.75rem;
}
justify-content y align-content — empaquetar la rejilla
Cuando las pistas son más pequeñas que el contenedor, las propiedades content deslizan o espacian toda la rejilla. Útil para tableros de iconos que no deben estirarse sin fin.
.board {
display: grid;
grid-template-columns: repeat(3, 6rem);
justify-content: space-between;
align-content: start;
gap: 0.5rem;
min-height: 12rem;
}
Un hábito calmado de contenedor grid
Primero columnas y filas de plantilla, luego gap, luego alineación de ítems en celdas, luego empaquetado content si queda espacio. Mira grid-auto-flow cuando importe el orden de auto-colocación. Deja span, números de línea y áreas con nombre para las siguientes lecciones Grid.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto 1fr;
gap: 1.25rem;
justify-items: stretch;
align-items: stretch;
}
Pruébalo tú
- Haz un tablero con tres columnas
1fry filasauto 1fr auto. - Añade
gap: 1rem. - Centra el contenido de las celdas con
justify-itemsyalign-items. - Empaqueta un tablero de pistas fijas con
justify-content: space-between. - Anota una propiedad que guardarás para Grid Items o Grid Areas.
Errores comunes
- Mezclar
justify-items(dentro de celdas) conjustify-content(toda la rejilla) - Poner
spande ítem o nombres de área en el contenedor demasiado pronto - Definir solo columnas y sorprenderte de alturas de fila aleatorias
- Traer hábitos de
growde Flex al contenedor grid - Tratar esta lección como el módulo Areas completo
Resumen
- Las props del contenedor grid definen pistas, canalizaciones y alineación
grid-template-columns/rowsbocetan la rejillajustify-items/align-itemsalinean contenido dentro de las celdasjustify-content/align-contentempaquetan la rejilla en espacio libre- El span de ítems y las áreas con nombre llegan en lecciones Grid posteriores
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior