Generador de CSS Grid
Diseña una cuadrícula CSS de forma visual: define columnas, filas, espacios y celdas combinadas, y luego copia el CSS de grid-template. Todo funciona en tu navegador.
El generador de CSS Grid funciona por completo en tu navegador. Las columnas, filas, tamaños de pista, espacios y celdas combinadas que configuras nunca salen de tu dispositivo y nada se sube a ArrayKit.
Abre el formateador de CSS
Acerca de Generador de CSS Grid
El generador de CSS Grid te permite construir un diseño de cuadrícula a ojo y copiar el CSS exacto que produce. Elige un número de columnas y filas, dimensiona cada pista con unidades fr, píxeles, porcentajes, auto o minmax(), y define el espacio. Una vista previa en vivo muestra la cuadrícula; haz clic en dos celdas para combinarlas en una región abarcada y la herramienta escribe por ti las reglas grid-column y grid-row correspondientes. Las series de tres o más pistas idénticas se colapsan en repeat() para que la salida quede ordenada, y puedes renombrar el selector para que coincida con tu propia clase. Está pensado para desarrolladores de front-end que maquetan tarjetas, paneles y estructuras de página y quieren un CSS de grid-template correcto sin contar líneas a mano. El editor funciona por completo en tu navegador, así que nada de lo que escribes se sube.
Características
- Define el número de columnas y filas y dimensiona cada pista de forma independiente
- Dimensionado por pista con presets de fr, px, %, auto y minmax()
- Cuadrícula de vista previa en vivo que refleja tu plantilla y espacio con exactitud
- Haz clic en dos celdas para combinarlas en una región abarcada
- Las series de pistas idénticas se colapsan en repeat() automáticamente
- Espacio de fila y espacio de columna separados cuando deben diferir
- Selector personalizado para que la regla coincida con el nombre de tu propia clase
- Copia un CSS de grid-template limpio más las ubicaciones grid-column / grid-row
Cómo usar Generador de CSS Grid
- Elige cuántas columnas y filas necesita tu diseño
- Dimensiona cada pista con fr, px, %, auto o minmax()
- Define el espacio, y un espacio de columna si debe diferir
- Haz clic en dos celdas de la vista previa para combinar una región abarcada
- Copia el CSS generado en tu hoja de estilos
Ejemplo
Entrada
columns: 200px 1fr 1fr 1fr
rows: auto
gap: 20
merge: cols 2-4
Salida
.grid {
display: grid;
grid-template-columns: 200px repeat(3, 1fr);
grid-template-rows: auto;
gap: 20px;
}
.grid > :nth-child(1) {
grid-column: 2 / span 3;
grid-row: 1;
}
Tres columnas iguales se colapsan en repeat(3, 1fr) y las celdas combinadas abarcan tres pistas.
Errores comunes y solución de problemas
- El diseño usa más columnas de las que define mi lista de pistas. — Cada columna implícita se vuelve una pista auto. Añade pistas explícitas para cada columna que quieras dimensionar, o define grid-auto-columns para el desbordamiento en tu propio CSS.
- Una región combinada se solapa con otra y las celdas desaparecen. — Las regiones combinadas no pueden solaparse. Haz clic en el bloque existente para dividirlo primero, y luego selecciona dos celdas para el nuevo tramo para que los rectángulos se mantengan separados.
- repeat() no apareció aunque las pistas parecen iguales. — Solo tres o más pistas idénticas y adyacentes se colapsan en repeat(). Un número simple como 1 se lee como 1fr, así que unidades mixtas como 1fr y 1 siguen coincidiendo una vez normalizadas.
- La ubicación del hijo cae en el elemento equivocado. — Las ubicaciones apuntan a los hijos de la cuadrícula en orden de origen mediante :nth-child(). Reordena tu marcado o ajusta el índice de nth-child para que la regla afecte al elemento que quieres.
Preguntas frecuentes
- ¿Qué genera el generador de CSS Grid?
- Produce una regla de contenedor con display: grid, grid-template-columns, grid-template-rows y gap, más una regla grid-column / grid-row por cada región combinada que crees. Copias todo el bloque en tu hoja de estilos.
- ¿Cuándo se colapsan mis pistas en repeat()?
- Tres o más pistas idénticas y adyacentes se pliegan en repeat(n, valor). Una o dos seguidas se escriben tal cual, ya que repeat() solo acorta la salida a partir de tres pistas. Las secuencias mixtas intercalan pistas literales y grupos repeat().
- ¿Cómo combino celdas para abarcar varias columnas o filas?
- Haz clic en una celda de la vista previa y luego en una segunda celda. La herramienta selecciona el rectángulo entre ellas y escribe grid-column y grid-row con la línea de inicio y el tramo correctos. Haz clic de nuevo en un bloque combinado para dividirlo en celdas individuales.
- ¿Puedo usar minmax(), auto y porcentajes para los tamaños de pista?
- Sí. Cada pista acepta un valor fr, una longitud en píxeles, un porcentaje, auto o minmax(min, max). Los números simples se tratan como fr, y el espaciado de minmax() se normaliza para que el CSS copiado sea coherente.
- ¿Por qué la regla generada usa un selector :nth-child()?
- Las regiones combinadas se ubican por posición, así que la herramienta apunta a los hijos de la cuadrícula en orden de origen con :nth-child(). Renombra el selector del contenedor a tu propia clase y las reglas de ubicación lo siguen automáticamente.
- ¿Se envía a algún sitio la cuadrícula que diseño?
- No. El generador de CSS Grid construye el CSS de plantilla y ubicación por completo en tu navegador. Las columnas, filas, espacios y celdas combinadas que defines nunca salen de tu dispositivo y no se suben a ArrayKit.
Herramientas relacionadas
Todas las herramientas de ArrayKit