Grid responsive CSS
Grid Areas te enseñó a nombrar el mapa de la página. Grid responsive pregunta qué pasa cuando el viewport se estrecha: ¿colapsan columnas?, ¿la barra lateral baja bajo la cabecera?, ¿las tarjetas refluyen sin otro HTML? Patrones calmados con media queries — el módulo Responsive Design viene después.
Caja de herramientas grid responsive
📊 Grid responsive de un vistazo
| Herramienta | Uso habitual |
|---|---|
grid-template-columns |
Cambiar pistas dentro de una media query (p. ej. dos columnas → una) |
grid-template-areas |
Redibujar el mapa cuando apilar gana a lado a lado |
repeat(auto-fit, minmax(...)) |
Columnas de tarjetas fluidas sin un breakpoint por cantidad |
| Media query | Aplica cambios de grid solo cuando el viewport coincide |
gap |
Mantiene el ritmo al cambiar pistas o mapas |
| Evitar HTML extra por ancho | Mismo DOM; CSS mueve el layout |
Parte del grid que ya confías en pantalla ancha. En un breakpoint claro cambia columnas, filas o el mapa de áreas — no todo a la vez. Los nombres del tema anterior hacen legibles los cambios.
Columnas en un breakpoint
Cuando un shell de dos columnas debe ser una en móvil, cambia grid-template-columns dentro de una media query.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
gap: 1rem;
}
@media (max-width: 40rem) {
.shell {
grid-template-columns: 1fr;
}
}
Redibuja el mapa de áreas en pantallas estrechas
Mapas header / aside / main lado a lado suelen necesitar un nuevo bloque grid-template-areas cuando la barra va bajo la cabecera. Reescribe filas entre comillas; regiones rectangulares.
.shell {
display: grid;
grid-template-columns: 14rem 1fr;
grid-template-areas:
"header header"
"aside main"
"footer footer";
gap: 1rem;
}
@media (max-width: 48rem) {
.shell {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"aside"
"main"
"footer";
}
}
auto-fit y minmax para tableros de tarjetas
En galerías y dashboards, repeat(auto-fit, minmax(...)) deja que columnas aparezcan y envuelvan según el espacio — a menudo con menos breakpoints manuales.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
Viewport estrecho no es otro idioma de layout — mismas herramientas grid, otras pistas o mapas. Prefiere CSS a duplicar markup «móvil».
Hábito calmado de grid responsive
Un breakpoint principal primero. Empareja cambio de columnas con reescritura del mapa cuando ayuden las etiquetas. auto-fit donde el número de tarjetas debe flexionar. Orden DOM sensato. Teoría responsive amplia en el módulo siguiente.
.page {
display: grid;
grid-template-columns: minmax(12rem, 16rem) 1fr;
grid-template-areas: "nav content";
gap: 1.25rem;
}
@media (max-width: 42rem) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"nav"
"content";
}
}
.stats {
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr));
gap: 0.75rem;
}
@media (max-width: 36rem) {
.stats {
grid-template-columns: 1fr;
}
}
Pruébalo tú
- Pasa un shell de dos columnas a una bajo
max-width: 40rem. - Reescribe mapa header / aside / main / footer para apilar en estrecho.
- Fila de tarjetas con
repeat(auto-fit, minmax(14rem, 1fr)). - Un breakpoint calmado — no resetees todo el grid de golpe.
- Un árbol HTML; sigue Responsive Design en el curso.
Errores frecuentes
- Encoger pistas sin fin en vez de cambiar columnas o apilar
- HTML «móvil» separado en vez de actualizar grid en CSS
- Conteo de celdas distinto al reescribir filas de
grid-template-areas - Una media query gigante que resetea todo
- Tratar esta lección como todo el curso Responsive
Resumen
- Grid responsive adapta columnas, mapas y tableros auto-fit al ancho
- Media queries acotan cambios de pistas y mapas
- Áreas nombradas encajan con reescrituras en pantallas pequeñas
- Breakpoints calmados y un solo DOM
- Módulo Grid (490–530) completo; sigue Responsive Design
🧠 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