Generador de Cuadrícula CSS Grid - Crea layouts responsivos

Generador de Cuadrícula (CSS Grid)

Crea layouts con CSS Grid de forma visual. Ajusta columnas, filas, espacios y alineación. Ideal para diseños responsivos y complejos.

* CSS Grid es el sistema más potente para layouts bidimensionales

Configuración de Grid

Número de columnas: 3

Tamaño de columnas:

Número de filas: 2

Tamaño de filas:

Espaciado (gap): 10px

Alineación horizontal:

Alineación vertical:

Mostrar números en las celdas

Vista previa - CSS Grid

Código CSS: display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px;

Código CSS completo

/* Código CSS generado */

Código CSS - Selecciona formato

/* Selecciona un formato */

Presets populares

Guía rápida de CSS Grid

Define las columnas. Usa fr para fracciones, px para fijos, auto para automático.

Define las filas. Misma sintaxis que las columnas.

Espacio entre celdas. Puede ser gap: 10px o separado row-gap y column-gap.

Consejo: Usa repeat(auto-fit, minmax(250px, 1fr)) para crear grids responsivos que se adaptan al ancho disponible.

No hay grids guardados

Herramientas de hardware