Generador de CSS Grid

Diseña layouts CSS Grid visualmente. Define columnas, filas, espaciado y ubicación de elementos con vista previa en vivo.

Cómo funciona: Define la estructura de tu grid con columnas y filas. Ajusta tamaños de pista, espaciado y ubicación de elementos. Copia el CSS generado cuando tu layout esté listo.

3
2
8px
8px
11fr
21fr
31fr
11fr
21fr
Elemento 1
Elemento 2
Elemento 3
Elemento 4
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

¿Qué es CSS Grid?

CSS Grid Layout es un sistema de layout bidimensional que te permite crear layouts web complejos con filas y columnas simultáneamente. A diferencia de Flexbox que trabaja en una dimensión, Grid te da control completo sobre ambos ejes, siendo perfecto para layouts de página, dashboards y galerías de imágenes.

Cómo Usar el Generador de Grid

Comienza configurando el número de columnas y filas. Ajusta los tamaños de pista usando unidades fr (fraccional), px o auto. Usa los controles de gap para agregar espaciado entre celdas. Haz clic en los elementos del grid para que ocupen múltiples columnas o filas. El CSS generado se actualiza en tiempo real — cópialo cuando estés listo.

Grid Template Columns y Rows

Las propiedades grid-template-columns y grid-template-rows definen los tamaños de pista. La unidad fr distribuye el espacio disponible proporcionalmente — 1fr 2fr le da a la segunda columna el doble de ancho. Usa auto para dimensionado basado en contenido, minmax() para rangos responsivos y repeat() para patrones repetitivos.

Patrones Comunes de CSS Grid

  • Layout de 12 columnas: repeat(12, 1fr) para máxima flexibilidad
  • Dashboard: sidebar (250px) + main (1fr) con header y footer a ancho completo
  • Galería de fotos: auto-fill con minmax(200px, 1fr) para columnas responsivas
  • Layout de blog: 1fr 3fr para sidebar y contenido
  • Holy grail: header, cuerpo de 3 columnas, footer usando grid-template-areas
  • Grid de cards: auto-fit con minmax para cards responsivas iguales