CSS Grid

1.Grid frente a Flexbox

CSS Grid es el sistema de layout para dos dimensiones: filas y columnas a la vez. Donde Flexbox coloca los ítems en una línea, Grid dibuja una cuadrícula y tú decides qué ocupa cada celda.

Igual que en Flexbox, hay un contenedor (display: grid) y ítems (sus hijos directos).

2.Definir columnas y filas

.cuadricula {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;   /* una fija y dos flexibles */
  gap: 16px;
}

3.Cuadrículas que se adaptan solas

La combinación más útil de Grid: columnas tan anchas como puedan, pero nunca menos de 200px, y tantas como quepan. Sin media queries:

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

• auto-fit crea todas las columnas que caben y estira las que sobran.
• auto-fill también las crea, pero conserva los huecos vacíos (las columnas no se estiran).
• minmax(200px, 1fr): mínimo 200px, máximo un reparto igual del espacio.

4.Colocar ítems: líneas y span

Las líneas de la cuadrícula se numeran desde 1. Un ítem puede ocupar de una línea a otra:

.destacado {
  grid-column: 1 / 3;      /* de la línea 1 a la 3 (2 columnas) */
  grid-row: span 2;        /* ocupa 2 filas */
}
.ancho { grid-column: 1 / -1; }     /* de la primera a la última línea: toda la fila */
.doble { grid-column: span 2; }     /* ocupa 2 columnas desde donde esté */

5.Layout con áreas con nombre

La forma más legible de maquetar una página: dibujas el diseño con texto y asignas cada elemento a su zona.

.pagina {
  display: grid;
  grid-template-columns: 200px 1fr 160px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "cab  cab   cab"
    "lat  main  extra"
    "pie  pie   pie";
  gap: 12px;
  min-height: 100dvh;
}
.cab    { grid-area: cab; }
.lateral{ grid-area: lat; }
.principal { grid-area: main; }
.extra  { grid-area: extra; }
.pie    { grid-area: pie; }

6.Alineación en Grid

.centro { display: grid; place-items: center; min-height: 100dvh; }

Formularios alineados

Una cuadrícula de dos columnas alinea etiquetas y campos perfectamente, algo muy difícil con otros métodos:

7.Algunas ideas más

• grid-auto-flow: dense: rellena huecos con los ítems siguientes (útil en galerías con ítems de distintos tamaños).
• subgrid: permite que una cuadrícula hija use las columnas de la cuadrícula padre, para alinear contenidos entre tarjetas.
• Líneas con nombre: grid-template-columns: [inicio] 1fr [medio] 2fr [fin].
• Grid anidado: un ítem de la cuadrícula puede ser a su vez otra cuadrícula (o un contenedor flex).
• DevTools: en Chrome y Firefox, al inspeccionar un contenedor Grid, aparece un icono para dibujar la cuadrícula y numerar las líneas.

8.Errores frecuentes

• Esperar que Grid actúe sobre los nietos: solo los hijos directos son ítems.
• Contar mal las líneas: hay una línea más que columnas (3 columnas → líneas 1 a 4).
• Olvidar gap y usar márgenes en cada ítem.
• Usar px fijos en todas las columnas y perder la adaptabilidad; combina fr, minmax() y auto-fit.
• Confundir auto-fit con auto-fill.
• Escribir un grid-template-areas con filas de distinto número de celdas: no es válido.
• Usar Grid para algo de una sola dimensión que Flexbox resuelve con menos código.

9.Glosario