Generador de CSS Grid

Compón un layout de CSS Grid en tu navegador. Escribe valores para cada pista de columna y fila (fr, px, %, auto, minmax, fit-content), elige los huecos y observa cómo la vista previa se renderiza con celdas numeradas. Copia la regla terminada con un clic. Puro en el navegador, sin subir nada.

Columnas 3 pistas
Filas 2 pistas
Preajustes
Hueco y alineación
Vista previa en vivo — celdas
Salida CSS 
display: grid;

Pega esto en un selector que coincida con tu contenedor. Los valores por defecto (justify-items, align-items, grid-auto-flow, huecos a cero) se omiten para mantener la salida limpia.

Referencia rápida
1fr

Una parte flexible del espacio restante. 2fr es el doble de ancho que 1fr.

auto

La columna se encoge al tamaño mínimo/máximo de su contenido.

minmax(200px, 1fr)

Al menos 200 px, pero crece para compartir el espacio sobrante.

fit-content(300px)

Se encoge al contenido pero se limita a 300 px.

repeat(auto-fit, minmax(180px, 1fr))

Tarjetas responsivas. Tantas columnas como quepan, nunca más estrechas que 180 px.

[name] 1fr [name-end]

Líneas con nombre para colocar hijos mediante grid-column: name / name-end.