CSS Grid

Filas y columnas: el sistema de layout más potente de CSS.

Flexbox es perfecto para layouts en una dirección (fila o columna). Pero, ¿qué pasa cuando necesitas controlar filas y columnas al mismo tiempo? Un dashboard con sidebar y contenido, una galería de imágenes con tamaños variados, una página con áreas definidas… Para eso existe CSS Grid.

Grid te permite crear layouts bidimensionales con un control total sobre filas y columnas. Donde Flexbox es un sistema de una dimensión, Grid trabaja en dos.

Cómo activar Grid

Igual que Flexbox, solo necesitas una propiedad en el contenedor:

.grid {
  display: grid;
}

Pero a diferencia de Flexbox, Grid no hace nada visible hasta que definas las columnas y/o filas.

Definir columnas y filas

`grid-template-columns`

.grid {
  display: grid;
  grid-template-columns: 200px 200px 200px;  /* 3 columnas de 200px */
}

Con la unidad fr (fracción del espacio disponible):

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 columnas iguales */
  grid-template-columns: 2fr 1fr;       /* 2 columnas: 2/3 y 1/3 */
  grid-template-columns: 250px 1fr;     /* Sidebar fija + contenido flexible */
}

La unidad fr

fr significa “fracción del espacio disponible”. 1fr 1fr 1fr divide el espacio en 3 partes iguales. 2fr 1fr da 2/3 al primero y 1/3 al segundo. Es la unidad estrella de CSS Grid porque se adapta automáticamente al espacio disponible.

`repeat()` — Evitar repetición

.grid {
  grid-template-columns: repeat(3, 1fr);      /* 3 columnas iguales */
  grid-template-columns: repeat(4, 200px);    /* 4 columnas de 200px */
  grid-template-columns: repeat(3, 1fr 2fr);  /* 6 columnas alternando */
}

`grid-template-rows`

Define las filas (funciona igual que columns):

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px auto 60px;  /* Header fijo, contenido auto, footer fijo */
}

`gap` — Espacio entre celdas

Igual que en Flexbox:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;          /* Mismo espacio horizontal y vertical */
  gap: 1rem 2rem;       /* row-gap | column-gap */
}

Grid responsive con `auto-fill` y `auto-fit`

Aquí es donde Grid brilla. Puedes crear layouts que se adaptan automáticamente al ancho disponible sin media queries:

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

¿Qué hace repeat(auto-fill, minmax(250px, 1fr))?

auto-fill: crea tantas columnas como quepan.
minmax(250px, 1fr): cada columna mide mínimo 250px y máximo 1fr.

Resultado: en pantallas grandes ves 4 columnas, en tablets ves 2, en móvil ves 1. Todo automático.

Pro tip

repeat(auto-fill, minmax(250px, 1fr)) es probablemente la línea de CSS más poderosa que vas a aprender. Memorízala. Resuelve el 80% de los layouts de tarjetas y galerías responsive sin necesidad de media queries.

`auto-fill` vs `auto-fit`

auto-fill: crea columnas vacías si sobra espacio.
auto-fit: expande los items para llenar el espacio sobrante.

En la mayoría de casos, auto-fill es lo que quieres.

Posicionar items en el grid

Que un item ocupe varias columnas o filas

.item-destacado {
  grid-column: span 2;    /* Ocupa 2 columnas */
  grid-row: span 2;       /* Ocupa 2 filas */
}

Posición exacta

.item {
  grid-column: 1 / 3;     /* Desde la línea 1 hasta la 3 (2 columnas) */
  grid-row: 1 / 2;        /* Desde la fila 1 hasta la 2 (1 fila) */
}

Las líneas del grid se numeran así:

      1       2       3       4
      │       │       │       │
  1 ──┼───────┼───────┼───────┤
      │ col 1 │ col 2 │ col 3 │
  2 ──┼───────┼───────┼───────┤
      │       │       │       │
  3 ──┼───────┼───────┼───────┤

Grid areas: layout con nombres

La forma más legible de definir un layout complejo es con áreas nombradas:

.layout {
  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;
  gap: 1rem;
}

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

<div class="layout">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Contenido principal</main>
  <footer class="footer">Footer</footer>
</div>

Mira el CSS: la propiedad grid-template-areas es como un plano visual de tu página. Cada cadena de texto es una fila, y cada nombre dentro es una celda. Es increíblemente legible.

Grid areas

grid-template-areas te permite “dibujar” tu layout con texto. Cada nombre define un área que luego asignas a elementos con grid-area. Puedes usar . (punto) para celdas vacías.

Alineación en Grid

Grid usa las mismas propiedades de alineación que Flexbox:

.grid {
  display: grid;
  /* Alinear items en las celdas */
  justify-items: center;     /* Horizontal dentro de cada celda */
  align-items: center;       /* Vertical dentro de cada celda */

  /* Alinear el grid completo en el contenedor */
  justify-content: center;   /* Grid horizontal en el contenedor */
  align-content: center;     /* Grid vertical en el contenedor */
}

Para un item individual:

.item {
  justify-self: end;      /* Este item a la derecha de su celda */
  align-self: start;      /* Este item arriba de su celda */
}

¿Flexbox o Grid?

No son competidores. Son complementarios:

Situación	Usa
Elementos en fila o columna	Flexbox
Navbar, botones en fila, lista de tags	Flexbox
Layout de página completa (header, sidebar, main, footer)	Grid
Galería de tarjetas con filas y columnas	Grid
Centrar un solo elemento	Flexbox
Layout complejo con áreas nombradas	Grid

La regla general: Flexbox para componentes, Grid para layouts de página.

En la práctica, los usarás juntos. Un layout de página con Grid, y dentro de cada área, Flexbox para alinear los elementos internos.

Ejercicio: Dashboard con CSS Grid

Crea el layout de un dashboard usando CSS Grid.

Crea el HTML con esta estructura:

<div class="dashboard">
  <header>Dashboard</header>
  <nav>Menu lateral</nav>
  <main>Contenido principal</main>
  <aside>Panel derecho</aside>
  <footer>Footer</footer>
</div>

Define el grid con áreas nombradas:
- Header arriba ocupando todo el ancho
- Nav a la izquierda (200px)
- Main en el centro (flexible)
- Aside a la derecha (250px)
- Footer abajo ocupando todo el ancho
Dale estilos a cada área: colores de fondo distintos, padding, bordes.
Agrega una galería dentro del <main> con 6 tarjetas. Usa repeat(auto-fill, minmax(200px, 1fr)) para que se adapten automáticamente.
Prueba responsive: ¿qué pasa cuando reduces el ancho del navegador? En el capítulo siguiente aprenderás a cambiar el layout con media queries.

Resumen

CSS Grid crea layouts bidimensionales (filas y columnas a la vez).
Se activa con display: grid y se definen columnas con grid-template-columns.
La unidad fr distribuye el espacio disponible proporcionalmente.
repeat(auto-fill, minmax(250px, 1fr)) crea grids responsive automáticos.
grid-template-areas permite “dibujar” el layout con nombres — la forma más legible.
Items pueden ocupar varias celdas con grid-column: span 2.
Flexbox para componentes, Grid para layouts de página.

Fuente oficial: CSS Grid en MDN — referencia completa con guías visuales de cada propiedad.

Siguiente capítuloDiseño responsiveTu web se verá bien en móviles, tablets y escritorio.

CSS Grid

CSS Grid

Cómo activar Grid

Definir columnas y filas

grid-template-columns

repeat() — Evitar repetición

grid-template-rows

gap — Espacio entre celdas

Grid responsive con auto-fill y auto-fit

auto-fill vs auto-fit

Posicionar items en el grid

Que un item ocupe varias columnas o filas

Posición exacta

Grid areas: layout con nombres

Alineación en Grid

¿Flexbox o Grid?

Resumen

`grid-template-columns`

`repeat()` — Evitar repetición

`grid-template-rows`

`gap` — Espacio entre celdas

Grid responsive con `auto-fill` y `auto-fit`

`auto-fill` vs `auto-fit`