Stax

Generador de CSS Grid

Construye diseños CSS Grid visualmente con vista previa en vivo.

grid-template-columns

grid-template-rows

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 8px;
}

¿Qué es el generador de CSS Grid?

Esta herramienta visual crea layouts CSS Grid — filas, columnas, gaps, y áreas de grid. Coloca items con drag-drop, usa unidades fr para tamaño responsive. Perfecto para layouts de página, dashboards, grids de tarjetas.

Cómo usar el generador

  1. Selecciona número de filas y columnas.
  2. Establece tamaño de cada track (fr, px, %).
  3. Ajusta gap (entre fila y columna).
  4. Coloca items en celdas específicas.
  5. Copia el CSS generado.

Funciones de Grid

  • Unidades fr — distribución fraccional del espacio
  • Áreas template de grid — layout visual
  • minmax() — tamaños de track flexibles
  • auto-fit / auto-fill — grids responsive

Preguntas frecuentes

¿Cómo funciona CSS Grid?
Grid es un sistema de layout 2D — controla filas y columnas. El contenedor tiene display: grid; grid-template-columns: 1fr 1fr 1fr; (3 columnas iguales). Los items se colocan automáticamente o explícitamente con grid-area.
¿Qué es la unidad fr?
fr = unidad fraccional, parte del espacio disponible. 1fr 2fr 1fr = 25% 50% 25%. Mejor que pixel/porcentaje — responsive automáticamente. minmax(min, max) para columnas flexibles: minmax(200px, 1fr).
¿Qué son grid template areas?
Forma de definir layout visualmente. grid-template-areas: "header header" "sidebar main" "footer footer". Luego asigna items con grid-area: header. El código se vuelve muy legible.
¿Diferencia entre auto-fit y auto-fill?
Ambos se usan en repeat() para grids responsive. auto-fill — crea tracks vacíos (cuando hay espacio). auto-fit — colapsa tracks vacíos (los items se expanden). Para tarjetas/galerías, auto-fit es más común.

Herramientas relacionadas