Generador de CSS Grid

Define las columnas, filas y espaciados — elige fr, px o auto por pista, o escribe una lista explícita como «1fr 2fr 1fr». La vista previa numerada se actualiza en tiempo real; luego copia el CSS. Todo funciona en tu navegador.

Vista previa

Columnas3

Filas3

Espacio entre columnas12px

Espacio entre filas12px

Unidad de columna predeterminada

Unidad de fila predeterminada

Listas de pistas explícitas

CSS generado

Todo funciona en tu navegador. Nada se sube.

Cómo funciona

STEP 1

Define columnas y filas

Arrastra los controles deslizantes para ajustar el número de columnas, filas y los espaciados. La vista previa se llena con celdas numeradas a medida que realizas cambios.

STEP 2

Elige el tamaño de las pistas

Selecciona fr, px o auto para pistas iguales, o activa las listas de pistas explícitas para escribir algo como «1fr 2fr 1fr» y tener control total.

STEP 3

Copia el CSS

Copia la regla lista para usar — display, grid-template-columns / rows y gap — con un clic y pégala en tu hoja de estilos.