Generador CSS Grid
Crea layouts de cuadrícula visualmente — configura columnas, filas y espaciados, dibuja elementos haciendo clic o arrastrando.
① Define columnas & filas y tamaños de track ② Clic en celdas para agregar items y arrastra para span ③ Copia el CSS
Columnas
Filas
Espacio columnas (px)
16
Espacio filas (px)
16
Col
C1
C2
C3
Fila
R1
R2
R3
Preview
CSS generado
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
column-gap: 16px;
row-gap: 16px;
}Cómo usar CSS Grid
CSS Grid es un sistema de layout bidimensional que controla columnas y filas simultáneamente. Usa unidades fr para distribuir espacio proporcionalmente, px para tamaños fijos, % para tamaños relativos y auto para ajustarse al contenido. La propiedad gap añade espaciado uniforme. Define elementos con grid-column y grid-row usando números de línea start / end.
Preguntas frecuentes
CSS Grid Layout es un sistema de layout bidimensional integrado en los navegadores. A diferencia de Flexbox (que funciona en un eje), Grid permite definir filas y columnas explícitas y colocar elementos en cualquier punto de la cuadrícula.
fr significa "unidad fraccionaria". Representa una fracción del espacio disponible en el contenedor. Por ejemplo, grid-template-columns: 1fr 2fr 1fr crea tres columnas donde la central es el doble de ancha que las otras.
Usa auto cuando quieras que una columna o fila se ajuste a su contenido. Usa fr para llenar el espacio restante proporcionalmente. Combinándolos — ej. auto 1fr — crea una barra lateral que se adapta al contenido.
gap es la abreviación para ambos. gap: 16px establece ambos igual, gap: 16px 24px establece row-gap primero. Reemplazan el antiguo grid-gap ahora deprecado.
grid-column: 1 / 3 coloca un elemento de la línea 1 a la línea 3, abarcando 2 columnas. Alternativamente, grid-column: span 2 abarca 2 columnas desde la posición actual. Este generador usa la sintaxis start / end.
Sí. CSS Grid ha sido compatible con todos los navegadores modernos desde 2017 (Chrome 57, Firefox 52, Safari 10.1, Edge 16). Se puede usar en producción sin fallbacks.
Este generador soporta hasta 12 columnas y 8 filas, cubriendo la gran mayoría de layouts reales. CSS en sí no tiene límite fijo.