Generador de Grid

Define columnas, filas y espacios, coloca los ítems donde quieras (o dibuja áreas con nombre) y copia el CSS, el HTML o las clases de Tailwind.

¿Qué es CSS Grid?

CSS Grid es un sistema de layout en dos dimensiones: divides el contenedor en filas y columnas, como una hoja de cálculo, y colocas cada elemento en las celdas que quieras. Se activa con display: grid en el contenedor.

Las piezas clave:

• grid-template-columns y grid-template-rows — el tamaño de cada columna y fila. La unidad fr reparte el espacio libre: 1fr 2fr da a la segunda columna el doble que a la primera.
• gap — el espacio entre celdas (puedes separarlo en column-gap y row-gap).
• grid-column y grid-row — dónde empieza un ítem y cuántas celdas abarca: grid-column: 1 / span 2.
• grid-template-areas — un "dibujo" del layout con nombres, que luego asignas con grid-area.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  gap: 16px;
}

.header { grid-area: header; }

Generador

Usa Colocar ítems para posicionar elementos por número de línea, o Áreas con nombre para dibujar el layout escribiendo un nombre en cada celda.

Generador de Grid

Columnas

Responsive automático (auto-fit + minmax)

Filas

Valores válidos: 1fr, 200px, 25%, auto, minmax(100px, 1fr), min-content…

Espaciado y alineación

column-gappxrow-gappx

justify-items stretchstartendcenteralign-items stretchstartendcenterbaseline

Ítems (4)

Selecciona un ítem para colocarlo. Inicio 0 = colocación automática.

1

2

3

4

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 12px;
}

.item {
  padding: 16px;
  border-radius: 8px;
  background: #7c3aed;
  color: #fff;
}

.item-1 {
  grid-column: span 2;
}

.item-4 {
  grid-column: span 2;
}

Consejos de uso

• Galería responsive sin media queries: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Activa la casilla Responsive automático para probarlo.
• minmax(0, 1fr) evita que un contenido muy ancho (una tabla, un bloque de código) desborde la columna.
• span 2 hace que un ítem ocupe dos celdas sin tener que decir dónde empieza; Grid lo acomoda automáticamente.
• Las áreas con nombre hacen el CSS muy legible y facilitan el responsive: en móvil sólo cambias grid-template-areas dentro de una media query.
• Cada área debe ser un rectángulo. Formas en "L" o en "T" invalidan toda la propiedad (el generador te avisa).
• Para ver las líneas de tu grid en un sitio real, abre las DevTools del navegador (F12) y activa el distintivo grid junto al elemento.

¿Grid o Flexbox?

Usa Grid para el esqueleto de la página (header, sidebar, contenido, footer) y para cuadrículas de tarjetas. Usa Flexbox para alinear cosas dentro de cada pieza (los enlaces de una navbar, el contenido de una tarjeta).

Error común

Los nombres de las áreas van entre comillas por fila y sin comas: "header header" "sidebar main". Si todas las filas no tienen el mismo número de celdas, el navegador ignora la propiedad completa.