Tabla de contenido

Si Flexbox resolvió la alineación en una dimensión (fila O columna), CSS Grid resolvió el problema en dos dimensiones al mismo tiempo (fila Y columna). Es el sistema de layout más poderoso que tiene CSS hoy en día.

¿Qué es CSS Grid?

CSS Grid Layout es un sistema de diseño bidimensional nativo de CSS que te permite crear layouts complejos con filas y columnas de forma declarativa. Ya no necesitas trucos con floats, tablas o hacerte malabarismos con Flexbox para layouts de dos dimensiones.

Con Grid puedes hacer prácticamente cualquier layout de página que puedas imaginar, incluyendo los diseños que antes solo eran posibles con frameworks externos.

Activar Grid en un contenedor

Para activar Grid, aplica display: grid al contenedor padre:

.contenedor {
  display: grid;
}

Todos los hijos directos de ese contenedor se convierten automáticamente en grid items.

Definir filas y columnas

Las propiedades principales para definir la estructura del grid son:

.contenedor {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 3 columnas de 200px */
  grid-template-rows: 100px 100px;          /* 2 filas de 100px */
  gap: 16px;                                 /* espacio entre celdas */
}

Ejemplo con HTML:

<div class="contenedor">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
.contenedor {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 16px;
}

.item {
  background: #e8f4f8;
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
}

La unidad fr y repeat()

La unidad fr (fracción) distribuye el espacio disponible de forma proporcional. Es mucho más poderosa que los píxeles fijos porque se adapta al tamaño del contenedor:

.contenedor {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 columnas iguales */
}

/* Equivalente con repeat(): */
.contenedor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* 2/3 y 1/3: */
.contenedor {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

Para layouts responsivos sin media queries, auto-fill y minmax() son muy útiles:

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

Esto crea tantas columnas como quepan de mínimo 250px. En una pantalla ancha habrá 4 columnas, en una angosta solo 1. ¡Sin media queries!

Posicionar elementos en el grid

Por defecto, los items se ubican en orden automático. Pero puedes controlar exactamente dónde va cada elemento:

.item-grande {
  grid-column: 1 / 3; /* ocupa desde línea 1 hasta línea 3 (2 columnas) */
  grid-row: 1 / 2;
}

/* También puedes usar span: */
.item-ancho {
  grid-column: span 2; /* ocupa 2 columnas */
}

.item-alto {
  grid-row: span 3; /* ocupa 3 filas */
}

Ejemplo de layout de blog con posts destacados:

.grid-blog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.post-destacado {
  grid-column: span 2; /* el primer post ocupa 2 columnas */
}

Grid Template Areas

Esta es la característica más visual de Grid. Puedes nombrar las áreas y asignar elementos a ellas por nombre:

.layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "sidebar content ads"
    "footer  footer  footer";
  gap: 16px;
  min-height: 100vh;
}

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

Y el HTML es simplemente:

<div class="layout">
  <header>Encabezado</header>
  <aside class="sidebar">Menú lateral</aside>
  <main>Contenido principal</main>
  <div class="ads">Publicidad</div>
  <footer>Pie de página</footer>
</div>

Esto hace que el código CSS sea extremadamente legible: puedes ver el layout de página directamente en el CSS con grid-template-areas.

Grid vs Flexbox: ¿cuándo usar cada uno?

Una duda muy común es cuándo usar Grid y cuándo Flexbox. La respuesta simple:

Usa Flexbox cuando:

  • Distribuyes elementos en una sola dirección (fila o columna)
  • Navegación, botones en línea, centrar un elemento
  • El contenido determina el tamaño

Usa Grid cuando:

  • Necesitas control en dos dimensiones (filas Y columnas)
  • Layout de página completo (header, sidebar, main, footer)
  • Grid de cards con alturas uniformes
  • El layout determina el tamaño del contenido

Pueden combinarse: Grid para el layout general de la página, Flexbox dentro de los componentes individuales.

CSS Grid transforma la forma en que piensas sobre el diseño web. Una vez que lo dominas, crear layouts que antes parecían imposibles se vuelve trivial.