Generador de CSS Grid

Ajusta grid-template-columns/rows, justify-items, align-items y gap con una interfaz gráfica interactiva y previsualiza diseños reales de CSS Grid en tiempo real. Copia el CSS generado con un clic.

Última actualización: 2026-09-20

Construir una disposición CSS Grid a mano

CSS Grid es el método de disposición bidimensional, que atiende filas y columnas a la vez. Esta herramienta le permite cambiar `grid-template-columns` y `rows`, `justify-items`, `align-items` y `gap` en pantalla, confirmar el resultado sobre la marcha y copiar el CSS terminado.

**Decidir entre esto y Flexbox es sencillo si piensa en términos de uno o dos ejes.** Para disponer elementos en una sola fila, Flexbox sirve; **para una disposición donde filas y columnas deban alinearse a la vez, Grid encaja mejor.** La fuerza propia de Grid es la unidad `fr`, que expresa una parte del espacio sobrante: escriba `1fr 2fr` y el ancho restante se reparte uno a dos. **Lo otro que merece guardarse en la memoria es la forma `repeat(auto-fit, minmax(200px, 1fr))`.** Solo con eso obtiene **una disposición cuyo número de columnas sube y baja con el ancho, sin una sola consulta de medios.**

Cómo se usa

Empiece por un ajuste preestablecido Disposiciones habituales como tres columnas o una cabecera con barra lateral están a mano.
Cambie las definiciones de columnas y filas **Usar `fr` permite repartir por proporción el espacio sobrante.**
Pruebe las propiedades de alineación `justify-items` y `align-items` deciden cómo se asienta el contenido dentro de cada celda.
Copie el CSS generado Una vez que la disposición le satisfaga, puede pegarse directamente en su código.

Consejos para aprovecharla mejor

La unidad fr en grid-template-columns: repeat(3, 1fr) representa una fracción del espacio restante, por lo que la proporción de las columnas se mantiene aunque cambie el ancho de la ventana.
La propiedad gap solo afecta al espacio entre filas y columnas, a diferencia de margin, que también afecta al exterior de la cuadrícula. También puedes definir row-gap y column-gap por separado.
Las pistas configuradas como "auto" se ajustan al tamaño real de su contenido, lo cual es útil para columnas o filas cuyo contenido tiene una longitud impredecible.
Al sobrescribir grid-column: span 2 en un solo elemento, puedes hacer que solo la cabecera o el pie de página ocupen todo el ancho de la cuadrícula.
Usa Grid cuando necesites un diseño bidimensional completo, y Flexbox cuando baste con una sola fila o columna de elementos (consulta también nuestro generador de CSS Flexbox).

Cuándo resulta útil

Armar el esqueleto de una página entera

**Colocar cabecera, barra lateral, contenido y pie es precisamente aquello en que Grid destaca.**

Disponer tarjetas en retícula

**Combinar `auto-fit` con `minmax` hace que el número de columnas cambie con el ancho de la pantalla.**

Alinear un formulario

Alinear las columnas de etiquetas y campos deja que la vertical corra recta y se lee mucho mejor.

Aprender Grid

Cambiar un valor y observar el resultado deja claro cómo se deciden filas y columnas.

Términos de CSS Grid

Contenedor de retícula: El elemento padre al que se da `display: grid`. Dentro de él se definen las filas y las columnas.
Fr: **La unidad que expresa una parte del espacio sobrante.** Con `1fr 2fr`, el ancho restante se reparte uno a dos.
Grid-template-columns: Define la secuencia y los anchos de las columnas. `repeat()` ahorra escribir el mismo valor otra vez.
Minmax: La función que declara un mínimo y un máximo. **`minmax(200px, 1fr)` significa "asegura 200 píxeles y crece si hay sitio".**
Auto-fit: La palabra clave que crea tantas columnas como quepan. **Combinada con `minmax`, se pliega sin consulta de medios alguna.**
Gap: El espacio dejado entre filas y columnas. Las dos direcciones pueden fijarse por separado.

Preguntas frecuentes

Usa CSS Grid cuando necesites controlar filas y columnas a la vez, como en la estructura general de una página o un panel de control. Usa Flexbox cuando baste con una sola dirección (una fila o una columna) de elementos, como una barra de navegación o una fila de tarjetas. Muchas páginas reales combinan ambos: Grid para la estructura general y Flexbox dentro de los componentes.

fr significa "fraction" (fracción) y representa una parte del espacio sobrante dentro del contenedor. Por ejemplo, grid-template-columns: 1fr 2fr reparte el espacio de forma que la segunda columna sea el doble de ancha que la primera. A diferencia de una unidad absoluta como px, las pistas en fr mantienen su proporción al redimensionar el contenedor.

repeat() es una forma abreviada de repetir el mismo patrón de pista varias veces, por lo que repeat(3, 1fr) equivale a escribir grid-template-columns: 1fr 1fr 1fr. Se mantiene conciso incluso cuando el número de columnas es grande o cambia dinámicamente, ya que solo necesitas indicar la cantidad y el tamaño de la pista.

El diseño "holy grail" (santo grial) es una estructura clásica de página web que combina una cabecera, una barra lateral, el contenido principal y un pie de página. Antes de CSS Grid, requería complicados trucos con float o etiquetas de tabla, pero propiedades como grid-template-areas permiten reproducirlo con solo unas pocas líneas de CSS.

grid-column: span N hace que un elemento se extienda horizontalmente por N pistas (columnas). Por ejemplo, si asignas grid-column: span 3 solo al elemento de cabecera, este ocupará todo el ancho de una cuadrícula de 3 columnas mientras los demás elementos permanecen en sus celdas normales (grid-row admite la misma sintaxis de span).

A propósito — La "segunda dimensión" que CSS Grid persigue y Flexbox no cubre

CSS Grid Layout se diseñó como un sistema de diseño bidimensional que permite definir filas y columnas al mismo tiempo, a diferencia de Flexbox, que se centra en organizar elementos en una sola dirección. Su estandarización en el W3C comenzó alrededor de 2011, y cuando Chrome, Firefox, Safari y Edge implementaron su soporte de forma casi simultánea en 2017, su adopción en proyectos reales se aceleró rápidamente.

Antes de que existiera Grid, organizar una página con la clásica estructura "holy grail" —cabecera, barra lateral, contenido principal y pie de página— requería soluciones complicadas basadas en float o etiquetas de tabla. CSS Grid introdujo propiedades declarativas como grid-template-columns, grid-template-rows y grid-template-areas que permiten recrear este diseño familiar con solo unas pocas líneas de CSS.

Hoy en día, gran parte del trabajo de diseño detrás de los paneles de control, las galerías de imágenes y los diseños al estilo de revista que giran en torno a filas y columnas se construye con CSS Grid. El soporte para "subgrid", que permite que una cuadrícula anidada herede el tamaño de las pistas de su elemento padre, también se ha extendido en los principales navegadores, facilitando mantener la coherencia en diseños complejos de varios niveles.

En la práctica, se ha consolidado la convención de que Grid se encargue de la estructura general de la página y Flexbox de la disposición de los elementos dentro de cada componente. Ambos no son tecnologías rivales, sino herramientas complementarias, cada una especializada en una fortaleza distinta (alineación unidimensional frente a distribución bidimensional en cuadrícula), y combinarlas dentro de una misma página se considera una práctica estándar.

Ver todas las curiosidades