Filas × columnas
3 × 3
Plantilla
repeat(3, 1fr)
Herramientas de diseño
Generador de CSS Grid — Filas, columnas y gaps
Define el número de columnas y filas, además de los espacios, para generar una maquetación básica con display:grid. Previsualiza la estructura de pistas, prueba plantillas rápidas y copia CSS o HTML para paneles de administración y rejillas de tarjetas.
CSSGridMaquetación
Cambio rápido:Generador de Flexbox
Añadir esta herramienta a favoritos
No se ha seleccionado un modo de almacenamiento de favoritos.
Acciones rápidas
Copia la URL de esta herramienta o abre la hoja de compartir del sistema en un dispositivo compatible.
设计配色
Generador de CSS Grid
3
3
3 × 3 网格
.grid {
display: grid;
} Casos de uso
- Crea una rejilla de tarjetas con columnas iguales
- Genera el andamiaje de una rejilla de página de administración
- Confirma rápidamente el número de columnas y los valores de espaciado
Cómo usar
- Define columnas, filas y espacios
- Previsualiza la estructura de la rejilla
- Copia el CSS o HTML generado
Entrada y salida de ejemplo
FAQ
¿Admite áreas de rejilla con nombre?
Se centra en la configuración básica de pistas (a menudo pistas iguales de 1fr). Los mapas complejos de grid-area todavía necesitan CSS escrito a mano.
Herramientas
Herramientas relacionadas
Continúa con otra herramienta traducida para una tarea cercana.
Generador de Flexbox
Generador de Flexbox — Diseño visual unidimensional
Ajusta flex-direction, justify-content, align-items, wrap y gap con vista previa en vivo. Añade o elimina cajas para ver el ajuste de línea y el espaciado y copia el CSS generado (y el andamiaje HTML) en tu proyecto.
Diseño CSS Maquetación