Grid
Flexbox es genial para una dimensión (fila o columna). Pero cuando necesitas controlar filas y columnas a la vez — un dashboard, una galería de imágenes, un layout de página — Grid es imbatible. Es el sistema de layout más potente de CSS y en 2026 tiene superpoderes como subgrid y auto-fit.
Tu primer grid
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
gap: 1.5rem;
}Con una sola línea de grid-template-columns tienes 3 columnas iguales. 1fr significa "una fracción del espacio disponible". Tres 1fr = tres partes iguales.
<div class="product-grid">
<article class="card">Nike Air Max 90</article>
<article class="card">Adidas Samba OG</article>
<article class="card">New Balance 550</article>
<article class="card">Puma Suede</article>
<article class="card">Converse Chuck 70</article>
<article class="card">Vans Old Skool</article>
</div>Los 6 elementos se distribuyen automáticamente en 3 columnas y 2 filas. No necesitas filas explícitas — Grid las crea implícitamente.
Columnas: más allá de repeat
/* Columnas con tamaños diferentes */
.layout {
display: grid;
grid-template-columns: 280px 1fr; /* Sidebar fija + contenido flexible */
}
/* Más variaciones */
.dashboard {
grid-template-columns: 250px 1fr 300px; /* Sidebar + Main + Panel lateral */
}
/* Mezclar unidades */
.pricing {
grid-template-columns: repeat(3, minmax(250px, 1fr)); /* Mín 250px, máx 1fr */
}auto-fit y auto-fill: grids responsivas sin media queries
Este es el truco más poderoso de Grid:
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}Esto crea un grid que:
- Pone tantas columnas como quepan.
- Cada columna tiene mínimo 280px y máximo 1fr.
- Si la pantalla se estrecha, reduce columnas automáticamente.
- Cero media queries. Es responsive por defecto.
La diferencia entre auto-fit y auto-fill: con pocos elementos, auto-fit estira las columnas para llenar el espacio, mientras que auto-fill deja columnas vacías. Casi siempre quieres auto-fit.
Grid template areas: layout visual
Puedes definir el layout con un mapa visual de nombres:
.page-layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 280px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100dvh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }<div class="page-layout">
<header class="header">Vinyl Paradise</header>
<aside class="sidebar">Navegación</aside>
<main class="main">Contenido principal</main>
<footer class="footer">© 2026</footer>
</div>Es como dibujar el layout en ASCII. Cada string es una fila, cada palabra es una celda. Los nombres que se repiten indican que ese área ocupa varias columnas.
Posicionar elementos en el grid
Puedes colocar elementos en posiciones específicas usando líneas de grid:
.featured-card {
grid-column: 1 / 3; /* Ocupa de la línea 1 a la 3 (2 columnas) */
grid-row: 1 / 2; /* Primera fila */
}
/* Shorthand con span */
.wide-card {
grid-column: span 2; /* Ocupa 2 columnas desde donde esté */
}
.tall-card {
grid-row: span 2; /* Ocupa 2 filas */
}Filas implícitas y auto-rows
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 200px; /* Todas las filas generadas miden 200px */
gap: 1rem;
}
/* Filas con tamaño mínimo pero flexibles */
.content-grid {
grid-auto-rows: minmax(100px, auto); /* Mín 100px, crece con el contenido */
}Subgrid: heredar el grid del padre
Subgrid es relativamente nuevo y resuelve un problema real: que los hijos se alineen con el grid del abuelo.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.card {
display: grid;
grid-template-rows: subgrid; /* Hereda las filas del padre */
grid-row: span 3; /* Ocupa 3 filas del grid padre */
}
/* Ahora el título, contenido y precio de todas las cards
están alineados entre sí, aunque el texto tenga diferentes longitudes */Sin subgrid, si una card tiene un título de 2 líneas y otra de 1, los precios quedan a diferentes alturas. Con subgrid, todo se alinea perfectamente.
Alinear contenido dentro del grid
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* Alinear todos los items */
justify-items: center; /* Horizontal dentro de cada celda */
align-items: center; /* Vertical dentro de cada celda */
/* O ambos a la vez */
place-items: center;
}
/* Alinear el grid entero dentro de su contenedor */
.grid {
justify-content: center; /* El grid como bloque, centrado horizontal */
align-content: center; /* El grid como bloque, centrado vertical */
place-content: center; /* Ambos */
}¿Flexbox o Grid?
| Usa Flexbox | Usa Grid |
|---|---|
| Navbar (una dimensión) | Layout de página (header, sidebar, main) |
| Botones en fila | Galería de imágenes |
| Centrar un elemento | Dashboard con paneles |
| Alinear items dentro de una card | Cards alineadas con subgrid |
| El contenido define el tamaño | El contenedor define el tamaño |
En la práctica, los usas juntos constantemente. Grid para el layout general, flexbox para componentes internos.
Crea un dashboard con CSS Grid
Construye el layout de un dashboard de analytics para una tienda online:
- Un layout de página con
grid-template-areas: header arriba (full width), sidebar a la izquierda, main a la derecha, footer abajo (full width) - Dentro de main, una grid de 4 cards de estadísticas con
repeat(auto-fit, minmax(250px, 1fr)) - Una card "destacada" que ocupe
grid-column: span 2 - Debajo, un grid de 3 gráficas (placeholder con background de color y altura fija) usando
grid-template-columns: 2fr 1fr 1fr(la primera más ancha) - Usa
gapen todo, nunca márgenes para separar elementos del grid
lightbulb Pistas
No necesitas gráficas reales — usa divs con un background de color y min-height: 200px como placeholder. Para el layout de página, grid-template-rows: auto 1fr auto hace que el main ocupe todo el espacio vertical disponible.
