1. ¿Qué es CSS Grid?

CSS Grid Layout es un módulo de CSS que permite crear rejillas bidimensionales (filas y columnas) de forma declarativa. A diferencia de Flexbox, que está orientado a una sola dimensión, Grid facilita la construcción de diseños complejos con menos código y mayor control.

El modelo se basa en líneas, trackes (carriles), celdas y áreas. Cada uno de estos conceptos se traduce en una propiedad CSS específica.

2. Principios básicos

• Líneas: números implícitos que delimitan los bordes de filas y columnas.
• Trackes: espacios entre dos líneas (p.ej., una columna o una fila).
• Celdas: intersección de un track de fila y uno de columna.
• Áreas: conjunto de celdas que forman un bloque rectangular.

3. Propiedades del contenedor Grid

.grid-container {
  display: grid; /* o inline-grid */
}

.grid-container {
  grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
  grid-template-rows: 200px auto 100px;   /* alturas distintas */
}

.grid-container {
  gap: 1.5rem; /* espacio entre filas y columnas */
}

.grid-container {
  grid-template-areas:
    "header header header"
    "sidebar main   main"
    "footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

4. Propiedades de los ítems Grid

.item {
  grid-column: 2 / 4;   /* inicia en la línea 2 y termina antes de la 4 */
  grid-row: 1 / span 2; /* ocupa 2 filas */
}

.item {
  justify-self: center;   /* alineación horizontal */
  align-self: end;        /* alineación vertical */
}

5. Ejemplos prácticos

5.1 Layout básico de 3 columnas

<div class="grid-container" style="display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Resultado: tres bloques iguales con espacio de 1 rem entre ellos.

5.2 Layout responsivo con auto-fill y minmax()

.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

El contenedor adapta automáticamente el número de columnas según el ancho disponible, manteniendo un ancho mínimo de 250 px.

5.3 Header‑Sidebar‑Main‑Footer con áreas nombradas

<div class="grid-container" style="display:grid; grid-template-columns:250px 1fr; grid-template-rows:auto 1fr auto; grid-template-areas:\'header header\'\'sidebar main\'\'footer footer\'; gap:1rem;">
  <header class="header" style="grid-area:header; background:#007bff; color:#fff; padding:1rem;">Header</header>
  <aside class="sidebar" style="grid-area:sidebar; background:#6c757d; color:#fff; padding:1rem;">Sidebar</aside>
  <main class="main" style="grid-area:main; background:#f8f9fa; padding:1rem;">Main Content</main>
  <footer class="footer" style="grid-area:footer; background:#343a40; color:#fff; padding:1rem;">Footer</footer>
</div>

Este patrón es el punto de partida para la mayoría de los dashboards y sitios corporativos.

6. Grid vs Flexbox: Comparativa rápida

7. Buenas prácticas, accesibilidad y performance

7.1 Uso de unidades relativas

Prefiere fr, minmax(), clamp() y % para que el layout se ajuste a cualquier viewport.

7.2 Evita anidaciones excesivas

Demasiadas sub‑rejillas pueden afectar al rendimiento del renderizado. Mantén la profundidad a 2‑3 niveles máximo.

7.3 Accesibilidad (ARIA y orden visual)

• El orden DOM sigue siendo la base para lectores de pantalla. No dependas solo de order o grid‑column para re‑ordenar contenido crítico.
• Usa role="region" y aria‑label en áreas principales como header y nav.

7.4 Depuración

Herramientas como Firefox Grid Inspector y la pestaña Layout de Chrome DevTools facilitan la visualización de líneas y áreas.

8. Compatibilidad y soporte de navegadores

CSS Grid está soportado en todos los navegadores modernos (Chrome ≥ 57, Edge ≥ 16, Firefox ≥ 52, Safari ≥ 10.1). Para versiones antiguas se puede usar NavegadorVersión mínimaEstado Chrome57✔️ Soporte completo Firefox52✔️ Soporte completo Safari10.1✔️ Soporte completo Edge (Chromium)79✔️ Soporte completo Internet Explorer—❌ No soporta Grid (usa Flexbox o fallback)

9. Preguntas frecuentes (FAQ)

¿Puedo combinar Grid y Flexbox en el mismo proyecto?

Sí. Usa Grid para la estructura global de la página y Flexbox para la alineación interna de componentes.

¿Cuál es la diferencia entre grid-gap y margin?

gap crea espacio entre filas/columnas sin afectar el tamaño del contenedor, mientras que margin añade espacio externo al elemento.

¿Cómo hago que una columna sea “sticky” al hacer scroll?

Aplica position: sticky; top: 0; al ítem y mantén la columna dentro de la rejilla.