Grid CSS
Flexbox alineó elementos en una dirección. CSS Grid abre el siguiente capítulo: filas y columnas a la vez. Activa display: grid, dibuja pistas (tracks), añade gap y profundiza después en las lecciones de Grid Container, Items, Areas y Responsive.
Una caja de herramientas inicial de Grid
📊 Grid de un vistazo
| Idea | Trabajo diario |
|---|---|
| Contenedor Grid | Padre con display: grid (o inline-grid) |
| Ítems Grid | Hijos directos que se sientan en la cuadrícula |
| Tracks | Filas y columnas que forman la retícula |
| Celdas / áreas | Espacios donde aterrizan los ítems (áreas en una lección posterior) |
gap |
Canaletas entre tracks sin trucos de margen |
Unidad fr |
Repartir el espacio sobrante entre tracks (avance) |
Piensa en Grid como papel milimetrado de la página: primero dibujas columnas y filas, luego dejas el contenido en las celdas. Flexbox sigue siendo excelente para barras de herramientas y grupos de un solo eje.
display: grid — enciende la retícula
Pon display: grid en el padre. Los hijos se convierten en ítems de cuadrícula automáticamente — no hace falta una clase extra para el modelo básico.
.board {
display: grid;
}
Primero las columnas — una plantilla sencilla
grid-template-columns define tracks verticales. Tres columnas iguales son un boceto tranquilo para tarjetas o mosaicos.
.board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
gap — canaletas honestas
Usa gap (o row-gap / column-gap) para que el espacio se mantenga coherente cuando los tracks se reflow. Prefiere gap a esparcir márgenes en cada hijo.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
Una matriz pequeña de tarjetas
La misma idea que un boceto de galería — tracks iguales más gap — pero ahora hablas Grid, no solo flex-wrap.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.cards__item {
min-height: 8rem;
}
fr — reparte el espacio libre
La unidad fr divide el espacio libre entre tracks. 2fr 1fr hace la primera columna el doble de ancha que la segunda cuando queda espacio.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
Un hábito Grid tranquilo
Usa Grid para cáscaras de página bidimensionales y matrices. Usa Flexbox para filas unidimensionales. Empieza con display: grid, un grid-template-columns sencillo y gap. Deja la colocación automática profunda, las áreas con nombre y los tracks Grid responsivos para las siguientes lecciones.
.page {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
.page__main,
.page__rail {
min-width: 0;
}
Pruébalo tú
- Crea un contenedor con
display: grid. - Define
grid-template-columns: repeat(3, 1fr). - Añade
gap: 1rementre tracks. - Prueba
2fr 1frpara una cáscara main + rail. - Escribe una frase: ¿cuándo seguirías eligiendo Flexbox?
Errores comunes
- Poner
display: griden cada elemento sin necesidad de layout - Esperar que solo el wrap de Flexbox sustituya un Grid 2D real
- Saltar
gapy pelear márgenes de hijos para siempre - Saltar a áreas con nombre antes de que los tracks básicos se sientan naturales
- Montar cáscaras de página enteras con float cuando Grid encaja mejor
Resumen
- CSS Grid es bidimensional: filas y columnas juntas
display: gridconvierte a los hijos en ítems de cuadrículagrid-template-columns(y luego filas) definen tracksgapyfrmantienen canaletas y espacio libre tranquilos- Llegan después lecciones más profundas de contenedor, ítem, área y Grid responsivo
🧠 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