Área de Juego de CSS Grid
Área de juego y generador de CSS grid en línea y gratuita. Edita pistas de columnas y filas (fr, px, auto, minmax), coloca elementos sobre líneas numeradas y copia el CSS.
Área de Juego de CSS Grid
Área de juego y generador de CSS grid en línea y gratuita. Edita pistas de columnas y filas (fr, px, auto, minmax), coloca elementos sobre líneas numeradas y copia el CSS.
Acerca del diseño con CSS Grid
Crea columnas y filas de forma visual
Un contenedor grid define las pistas de columnas y filas con grid-template-columns y grid-template-rows. Introduce valores como 1fr 2fr 120px o minmax(120px, 1fr), ajusta el gap y la alineación de los elementos, y observa cómo cambia la vista previa. Puedes partir del diseño de santo grial o del muro de tarjetas y modificarlo.
Las pistas son espacios; las líneas son límites
Tres pistas de columna crean cuatro líneas numeradas porque cada pista necesita un límite a cada lado. Por eso, grid-column: 1 / 3 empieza en la línea 1, atraviesa las dos primeras pistas y termina en la línea 3. Los puntos numerados de la vista previa hacen visible esta colocación basada en líneas.
Coloca cada elemento y copia el CSS
Selecciona una caja para definir las líneas inicial y final de grid-column y grid-row, y ajusta justify-self o align-self para ese elemento. Cada cambio válido se refleja en un CSS listo para copiar. Esta versión se centra en pistas explícitas y colocación por líneas, por lo que no admite repeat(), auto-fill, auto-fit, subgrid ni áreas con nombre mediante grid-template-areas.
Preguntas Frecuentes
Preguntas y respuestas frecuentes sobre este tema.
¿Qué puedo hacer con este generador de CSS Grid?
Puedes definir pistas de columnas y filas, cambiar el gap y la alineación, añadir cajas, colocar cada caja entre líneas numeradas, previsualizar el diseño y copiar el CSS del contenedor y de los elementos. Los ajustes predefinidos sirven como punto de partida para diseños comunes.
¿Qué significa grid-column: 1 / 3?
Coloca el elemento desde la línea de columna 1 hasta la línea 3, por lo que ocupa las dos pistas situadas entre ambas. Los números hacen referencia a las líneas de la cuadrícula, no a la cantidad de columnas que debe ocupar.
¿Qué significan fr, auto y minmax() en CSS Grid?
fr reparte el espacio restante en proporciones flexibles; auto calcula el tamaño según el contenido y el espacio disponible; minmax(mínimo, máximo) fija los límites inferior y superior de una pista. El editor también acepta pistas de píxeles fijos, como 120px.
¿Cuándo debo usar CSS Grid en lugar de Flexbox?
Usa Grid cuando filas y columnas deban trabajar juntas en un diseño bidimensional, como la estructura de una página o una matriz de tarjetas. Flexbox suele ser más sencillo para una sola fila o columna. Ambas técnicas se complementan, y un elemento grid también puede ser un contenedor flex.
¿Admite repeat(), auto-fit, subgrid o áreas de grid con nombre?
Todavía no. El editor de pistas acepta valores explícitos fr, px, auto y minmax() para que las líneas numeradas sean predecibles. repeat(), auto-fill, auto-fit, subgrid y grid-template-areas quedan fuera del alcance de esta versión.