CSS Grid: Construye Cualquier Layout en Minutos

CSS Grid: Poder de Layout Bidimensional

Mientras Flexbox maneja una dimensión (fila o columna), Grid maneja ambas simultáneamente. Es la herramienta correcta para layouts de página, dashboards, galerías de imágenes y cualquier cosa con filas Y columnas.

Grid Básico

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;  /* 3 columnas */
  grid-template-rows: auto 1fr auto;     /* 3 filas */
  gap: 16px;
}

La Unidad fr

fr significa "fracción del espacio restante":

grid-template-columns: 1fr 1fr 1fr;        /* 3 columnas iguales */
grid-template-columns: 1fr 2fr 1fr;        /* medio es 2x más ancho */
grid-template-columns: 250px 1fr;          /* sidebar fija + main fluido */
grid-template-columns: repeat(4, 1fr);     /* 4 columnas iguales */

Template Areas (Regiones Nombradas)

.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main   main"
    "footer footer footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Auto-Fit y Minmax (Responsivo Sin Media Queries)

/* Cards que auto-envuelven: mín 300px, crecen para llenar */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
/* 1 card por fila en mobile, 2 en tablet, 3+ en desktop — ¡sin breakpoints! */

Posicionando Items

.item {
  grid-column: 1 / 3;        /* de col 1 hasta col 3 */
  grid-column: span 2;       /* ocupa 2 columnas */
  grid-column: 1 / -1;       /* ocupa todas las columnas */
  grid-row: 1 / 3;           /* ocupa filas 1-2 */
}

Patrones Comunes

/* Layout dashboard */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "nav header"
    "nav main";
  height: 100vh;
}

/* Galería con imagen destacada */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.gallery .featured {
  grid-column: span 2;
  grid-row: span 2;
}

Grid vs Flexbox: Cuándo Usar Cuál

En la práctica, usa ambos: Grid para layout de página, Flexbox para componentes dentro de cada celda.

Referencia CSS: Cheatsheet CSS — Grid, Flexbox y todas las propiedades CSS buscables.