Generador CSS Grid
Construye una cuadrícula CSS (columnas, filas, gap) en vivo y copia el CSS.
- Instantánea
- Gratis
- Privada (procesada localmente)
- Sin registro
Una cuadrícula CSS, montada en vivo
Elige el número de columnas, filas y el espaciado: la vista previa muestra las celdas en tiempo real y el CSS del contenedor está listo para copiar.
-
Ajusta las columnas
De 1 a 8 pistas iguales (1fr).
-
Ajusta filas y gap
Número de filas y espaciado.
-
Copia el CSS
Aplícalo a tu contenedor grid.
El CSS del contenedor (por defecto)
| Propiedad | Valor |
|---|---|
| display | grid |
| grid-template-columns | repeat(3, 1fr) |
| grid-template-rows | repeat(2, 1fr) |
| gap | 8px |
La unidad 1fr reparte el espacio por igual. Para responsivo, sustituye por repeat(auto-fit, minmax(...)). Todo se genera localmente.
Preguntas frecuentes
¿Qué diferencia hay entre CSS Grid y Flexbox?
Flexbox coloca los elementos en un solo eje (fila o columna); Grid trabaja en dos dimensiones (columnas y filas a la vez). Grid es ideal para diseños completos, Flexbox para alineaciones simples.
¿Qué significa repeat(3, 1fr)?
Es una abreviatura de «3 columnas de 1 fracción cada una». La unidad fr reparte el espacio disponible por igual. Así, repeat(3, 1fr) crea tres columnas del mismo ancho que llenan el contenedor.
¿Cómo hago la cuadrícula responsiva?
Sustituye un número fijo por repeat(auto-fit, minmax(200px, 1fr)): las columnas se ajustan automáticamente al ancho. Esta herramienta genera una base de número fijo que puedes adaptar después.
¿El CSS se aplica al contenedor o a las celdas?
Al contenedor: display: grid y las propiedades grid-template definen la estructura. Las celdas hijas se colocan solas en las pistas creadas.