Diseño · Gratis

Generador CSS Grid

Crea una vista previa de cuadrícula y CSS a partir de columnas, filas y separación.

01Introduce los valores

Funciona en tu navegador

—

Funciona en tu navegador

Crea una vista previa de cuadrícula y CSS a partir de columnas, filas y separación.

Funciona en tu navegador

Los datos se procesan en esta página y no se envían a ningún servidor.

Acerca de esta herramienta

Crea una cuadrícula CSS de columnas iguales y adapta el código a tu página.

Introduce los valores
Columnas · Filas · Separación
Calcular / generar
Crea una vista previa de cuadrícula y CSS a partir de columnas, filas y separación.
Resultado
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Crea una cuadrícula CSS de columnas iguales y adapta el código a tu página.

Ejemplo práctico

Resultado

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

¿Cómo interpretar el resultado?

Crea una cuadrícula CSS de columnas iguales y adapta el código a tu página.

¿Adónde van mis datos?

Los cálculos se realizan en tu dispositivo. Los datos no se envían a un servidor.