CSS Grid: Diseño Bidimensional

La herramienta definitiva para maquetar rejillas complejas. Control total sobre filas, columnas y áreas.

Explorador de Rejillas

02
03
04
05

Propiedades del Padre

  • grid-template-columns: Define el ancho de las columnas.
  • grid-template-areas: Maquetación visual por nombres.
  • gap: Control de espaciado entre celdas (gutter).

Bento-Grid Rule

Usa `repeat(auto-fit, minmax(300px, 1fr))` para crear rejillas que se adaptan solas al ancho del dispositivo sin usar media-queries.

Laboratorio Interactivo de Grid