Generador de CSS Grid - Construye diseños de cuadrícula visualmente
Establece columnas, filas y espacios para construir visualmente un diseño de cuadrícula. Compatible con unidades fr/px/auto.
columnTemplate
1
2
3
rowTemplate
1
2
8px
preview
1
2
3
4
5
6
columnTemplate
1fr 1fr 1fr
rowTemplate
1fr 1fr
CSS
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
}
Cómo usar
- Ingresa el número de columnas y filas
- Establece el tamaño para cada columna/fila (fr/px/auto)
- Establece el espacio
- Previsualiza y copia CSS
Preguntas frecuentes
- ¿Qué propiedades Grid se pueden controlar?
- grid-template-columns, grid-template-rows, gap y más se pueden configurar visualmente.
- ¿Se admite la unidad fr?
- Sí. Se pueden usar fr, px, % y otras unidades.
- ¿El CSS generado se puede usar directamente?
- Sí. Copia el código y pégalo directamente en tu archivo CSS.
- ¿Se envían mis datos a un servidor?
- Todo el procesamiento ocurre en el navegador. No se envían datos a un servidor.
- ¿Puedo configurar grid-template-areas?
- El editor visual permite configurar columnas y filas, y el CSS generado incluye grid-template-columns y grid-template-rows. La configuración de áreas con nombre se puede hacer editando el CSS de salida manualmente.
Herramientas relacionadas
Historial de actualizaciones
Última actualización: 2026-02-21
- 2026-02-21 Lanzamiento inicial