Guía completa de CSS Grid en 2025

Qué es CSS Grid?

CSS Grid Layout es un sistema de diseño bidimensional que permite crear layouts complejos de manera sencilla. A diferencia de Flexbox, que trabaja en una sola dimensión (fila o columna), Grid trabaja en ambas dimensiones simultaneamente.

Conceptos básicos

Para empezar con CSS Grid, solo necesitas dos cosas: un contenedor con display: grid y definir las columnas y filas con grid-template-columns y grid-template-rows.

Definiendo columnas

La propiedad grid-template-columns define el número y tamaño de las columnas. La unidad fr (fraccion) es especialmente útil para distribuir el espacio disponible.

Gap y espaciado

La propiedad gap reemplaza a las antiguas grid-gap, grid-row-gap y grid-column-gap. Define el espacio entre filas y columnas de forma sencilla.

Tecnicas avanzadas

Una vez que dominas los conceptos básicos, puedes aprovechar técnicas más avanzadas como areas con nombre, posicionamiento explícito y el uso de minmax() con auto-fill para crear layouts verdaderamente responsivos sin media queries.

Grid areas con nombre

Las grid areas te permiten nombrar secciones de tu layout y colocar elementos usando esos nombres, haciendo el código mucho más legible y fácil de mantener.

Responsive sin media queries

Una de las caracteristicas más poderosas de CSS Grid es la capacidad de crear layouts responsivos sin necesidad de media queries, usando auto-fill o auto-fit junto con minmax().

Conclusion

CSS Grid es una herramienta indispensable para cualquier desarrollador frontend moderno. Combinado con Flexbox, te da el control total sobre el layout de tus aplicaciones.

Ejemplos de código

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 2rem;
}

.grid-item {
  background: var(--surface-elevated);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

HTML

<div class="grid-container">
  <div class="grid-item">Elemento 1</div>
  <div class="grid-item">Elemento 2</div>
  <div class="grid-item">Elemento 3</div>
  <div class="grid-item">Elemento 4</div>
  <div class="grid-item">Elemento 5</div>
  <div class="grid-item">Elemento 6</div>
</div>