Generador de Grid CSS

Crea visualmente diseños de CSS Grid. Configura filas, columnas, espaciado y copia el CSS y HTML resultante.

Columnas: 3

Filas: 3

Espacio entre columnas: 8px

Espacio entre filas: 8px

Plantilla de columnas

Vista previa

CSS

Características

Configuración de filas y columnas

Redimensionar arrastrando

Combinación de celdas

Control del espaciado

Genera CSS y HTML

Cómo Usar

1. Establece el número de filas y columnas.

2. Ajusta la altura de filas y el ancho de columnas (fr, px, auto).

3. Configura el espaciado del grid.

4. Copia el CSS y HTML generados.

Sobre esta herramienta

CSS Grid distribuye el contenido en filas y columnas a la vez, lo que lo convierte en la opción natural para galerías, paneles y estructuras de página. Este generador configura visualmente un contenedor de cuadrícula: elige cuántas columnas y filas necesitas, el espacio entre ellas y cómo reparten el espacio las columnas —fracciones iguales con 1fr, tamaño automático, minmax(0, 1fr) para que el contenido largo no ensanche una columna, o pistas fijas de 100px—. La vista previa muestra cómo fluyen los elementos por las pistas, y el CSS se escribe con repeat() para un resultado compacto y legible. Cópialo como punto de partida y coloca después cada elemento con grid-column y grid-row en tu propia hoja de estilos.

Preguntas Frecuentes

¿Qué significa la unidad fr?

fr representa una fracción del espacio libre del contenedor de cuadrícula. Tres columnas de 1fr reparten el espacio por igual, mientras que 2fr 1fr da a la primera columna el doble de ancho que a la segunda.

¿Por qué usar minmax(0, 1fr) en lugar de 1fr?

Una pista de 1fr no puede encogerse por debajo del tamaño mínimo de su contenido, así que una palabra larga o una tabla ancha pueden estirar la columna. minmax(0, 1fr) permite que la columna se encoja, y así las columnas iguales siguen siendo iguales.

¿Cómo hago una cuadrícula adaptable?

Un patrón habitual es grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)), que coloca tantas columnas de al menos 240px como permita el ancho y pasa el resto a filas nuevas sin media queries.

¿Cómo hago que un elemento ocupe varias columnas?

Añade grid-column: span 2 al elemento para que abarque dos columnas, o grid-column: 1 / -1 para que ocupe todo el ancho. grid-row funciona igual para las filas.

¿Qué diferencia hay entre gap, column-gap y row-gap?

column-gap fija el espacio entre columnas, row-gap el espacio entre filas y gap es la abreviatura de ambos. Los huecos solo añaden espacio entre pistas, no alrededor del exterior de la cuadrícula.