Generador de CSS Grid

Generador de CSS Grid: dibuja áreas arrastrando casillas

La caja del escenario de este generador de CSS Grid es un contenedor display: grid real. Las reglas de arriba y de la izquierda muestran, para cada pista de columna y de fila, el valor que has escrito, los px que ha calculado el navegador y los números de línea. Si arrastras sobre casillas vacías, se crea un área que ocupa ese rango; si arrastras un área, se mueve casilla a casilla, y si arrastras la esquina inferior derecha del área elegida, se amplía o se reduce. Al pulsar un chip de la regla puedes cambiar esa pista a valores como 1fr, 200px o minmax(120px, 1fr).

La frase situada bajo el escenario explica, paso a paso y en el orden del cálculo, cuántos px mide ahora 1fr y, cuando las columnas se generan automáticamente, cuántas caben, con su fórmula. El diseño terminado se copia como CSS con grid-template-areas, ya sea con nombres de área o con números de línea, y también puedes llevarte el HTML a la vez. «Copiar enlace» guarda el diseño actual en la dirección.

Cuándo conviene Grid: alinear filas y columnas a la vez

CSS Grid es una maquetación bidimensional: primero se fijan los límites de columnas y filas, y después se colocan los elementos en esas casillas. Como el tamaño de cada casilla lo deciden las pistas y no el contenido de los elementos, los bordes de las casillas coinciden con exactitud de una fila a otra. Resulta especialmente útil en pantallas como estas.

• Estructura de página: sirve para dividir zonas fijas como la cabecera, la barra lateral, el contenido principal y el pie. Si las escribes con nombres de área, basta leer el CSS para ver la maquetación (ejemplos «Página básica» y «Santo grial»).
• Paneles de control: permiten colocar en la misma cuadrícula varias casillas pequeñas de indicadores y un gráfico grande que ocupa dos o más casillas (ejemplo «Panel»).
• Listas de tarjetas: mantienen el mismo ancho en todas las filas aunque el número de columnas cambie con el ancho de pantalla. Si envuelves las filas con Flexbox, las tarjetas de la última fila tienden a ensancharse; las de Grid siguen el ancho de la pista, así que no ocurre (ejemplo «Tarjetas auto»).
• Colecciones de fotos de distinto tamaño: puedes mezclar fotos que ocupan dos o cuatro casillas y tapar los huecos con dense (ejemplo «Mosaico de fotos»).
• Superposición: si das a dos áreas las mismas casillas, puedes poner un texto sobre una imagen sin calcular posiciones. Arrastra en el escenario un área sobre otra para ver cómo se solapan.

Para un menú o un grupo de botones que se dispone en una sola dirección y reparte el espacio solo dentro de esa línea, Flexbox es más sencillo.

Cómo se usa

1. Elige un ejemplo. Al pulsar uno de los 9 mosaicos de arriba cambian a la vez las pistas, los huecos y las áreas. Las áreas que cambian se deslizan desde su sitio anterior hasta el nuevo.
2. Define las pistas. Con los botones de columnas y filas de la fila superior añades o quitas pistas, y con un chip de la regla cambias su tamaño. En el panel de la derecha puedes escribir un valor o elegir uno habitual, y añadir una pista antes o después de la elegida.
3. Dibuja las áreas. Arrastra sobre casillas vacías para crear un área, arrástrala para moverla y arrastra su esquina inferior derecha para cambiar el tamaño. Con el teclado, pon el foco en un área y muévela con las flechas de casilla en casilla, amplíala o redúcela con Mayús y las flechas, y bórrala con Supr. El nombre del área se cambia en el panel.
4. Comprueba los anchos. Cambia el ancho del contenedor con los botones Todo, 768, 480 y 360 de la fila superior o con el tirador de la esquina inferior derecha del escenario, y verás enseguida cómo se encogen las pistas fr y cuántas columnas automáticas quedan.
5. Copia. Elige entre nombres de área o números de línea y pulsa «Copiar CSS» o «Copiar HTML + CSS». Si activas «Incluir estilo de la vista previa», se añaden bordes y fondos, de modo que las casillas se ven aunque pegues el código en un archivo vacío.

Cómo leer los valores de pista

grid-template-columns y grid-template-rows admiten un tamaño por cada pista. Cuando un valor se repite, puede abreviarse con algo como repeat(3, 1fr), y esta herramienta lo escribe así cuando todas las pistas son iguales.

Cuántos px mide 1fr: el orden en que se reparte el espacio sobrante

Una fr no es una longitud fija, sino un factor para repartir el espacio que sobra. El navegador determina el tamaño de 1fr en este orden.

1. Al ancho interior se le restan los huecos (número de pistas − 1) y el tamaño de las pistas que no son fr. Lo que queda es el espacio sobrante.
2. Dividiendo el espacio sobrante entre la suma de los factores fr se obtiene el tamaño de 1fr. Si los factores suman menos de 1, se divide entre 1, de modo que una parte del espacio sobrante queda vacía.
3. Las pistas fr cuyo tamaño mínimo es mayor que su parte se fijan en ese mínimo, y las demás pistas fr se reparten de nuevo lo que queda. El mínimo de 1fr es auto, así que una palabra larga o una imagen dentro de la casilla pasan a ser el mínimo.

La tabla siguiente muestra los anchos de columna que calcula Chromium 151 en un contenedor con 800px de ancho interior y 16px de hueco entre columnas (solo la última fila usa 600px interiores y ningún hueco). Si introduces los mismos valores en el escenario, la frase de debajo muestra la misma fórmula.

En la última fila, el navegador empieza dividiendo 600 ÷ 3 = 200px, pero el mínimo de 240px de la primera columna es mayor que su parte de 200px, así que esa columna se fija en 240px. Los 360px restantes se reparten entre las otras dos columnas, a 180px cada una. Una columna de 2fr mide exactamente el doble que una de 1fr solo cuando la parte de ambas es mayor que su tamaño mínimo.

Nombres de área y números de línea

Una cuadrícula con n columnas tiene líneas verticales numeradas del 1 al n + 1. Los números pequeños que aparecen sobre las reglas del escenario son esos números de línea. grid-column: 1 / 3 va de la línea 1 a la línea 3, es decir, ocupa dos columnas, y grid-row: 2 / 4 ocupa dos filas. La última línea también puede escribirse como -1, de modo que 1 / -1 es el ancho completo sea cual sea el número de columnas.

grid-template-areas lleva un par de comillas por cada fila y un nombre de área por cada casilla. Una casilla vacía se escribe con un punto (.). El ejemplo «Página básica» escrito con nombres de área queda así.

.grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: 56px 1fr 48px;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
  gap: 12px;
}
.header { grid-area: header; }
.side { grid-area: side; }

Las casillas que comparten nombre deben formar un único rectángulo. Si tienen forma de L o están separadas, toda la declaración deja de ser válida. Entonces los elementos con grid-area: nombre no encuentran su área y se apilan todos en la misma casilla, creada fuera de la cuadrícula explícita. Además, todas las cadenas deben tener el mismo número de casillas. Una maquetación en la que dos áreas comparten casillas no puede escribirse con nombres, así que, cuando aparece un solapamiento, esta herramienta pasa a números de línea y explica el motivo encima del código.

Los nombres de área permiten imaginar la maquetación solo con leer el CSS, y se puede rehacer el diseño para cada ancho de pantalla cambiando únicamente las cadenas dentro de una media query. Los números de línea resultan más cortos cuando hay muchas casillas, como en una cuadrícula de 12 columnas, o cuando las áreas deben solaparse.

auto-fit y auto-fill: que el ancho decida el número de columnas

Si eliges «Auto según ancho», la definición de columnas adopta la forma repeat(auto-fill, minmax(min(100%, 160px), 1fr)). El navegador crea tantas columnas como caben sin desbordarse, y su número es ⌊(ancho interior + hueco) ÷ (ancho mínimo + hueco)⌋. min(100%, 160px) reduce el ancho mínimo al del elemento padre cuando este es más estrecho que 160px, para que una sola columna no se salga por el lateral.

auto-fit y auto-fill solo se ven distintos cuando hay menos áreas que columnas. auto-fill deja las columnas vacías como hueco, mientras que auto-fit pliega las columnas vacías a 0 junto con los huecos de ambos lados, de modo que las áreas restantes se ensanchan. Con un mínimo de 160px, un hueco de 16px y 3 áreas, el resultado es el siguiente.

A 360px hay 2 columnas, así que la tercera área baja a la fila siguiente, y a 600px el número de áreas coincide con el de columnas, por lo que ambos métodos dan lo mismo. Elige auto-fill si no quieres que una o dos tarjetas se ensanchen demasiado, y auto-fit si quieres que las tarjetas que hay ocupen todo el ancho.

Fuera de la cuadrícula explícita: filas implícitas y dense

Si hay más áreas que filas definidas con grid-template-rows, el navegador crea filas adicionales. Se llaman filas implícitas y su tamaño lo fija grid-auto-rows (por defecto, auto). En el escenario, los chips y las casillas de las pistas implícitas se dibujan con línea punteada. Las listas de tarjetas suelen no definir ninguna fila y limitarse a indicar grid-auto-rows.

Un área sin posición busca una casilla libre siguiendo el orden del HTML. Si un área de dos casillas no cabe al final de una fila, pasa a la siguiente y deja un hueco delante. Con grid-auto-flow: dense, un área posterior más pequeña rellena el hueco anterior. En el ejemplo «Mosaico de fotos», si desactivas «Rellenar huecos» queda vacía la fila 1, columna 4, y si lo activas p5 sube a ese sitio. Eso sí, dense solo cambia el orden visual; el orden de la tecla Tab y el de los lectores de pantalla siguen siendo los del HTML.

Alineación dentro de la casilla

Por defecto, un área llena su casilla con stretch. justify-items fija la posición horizontal dentro de la casilla y align-items la vertical; con start, center o end, el área se reduce al tamaño de su contenido y se coloca en ese punto. Poner ambos en center equivale a la sola línea place-items: center, y el ejemplo «Centrado» muestra esa maquetación. Para alinear un único área, aplícale justify-self y align-self.

Cuando la suma de las pistas es menor que el contenedor, todo el conjunto de pistas se pega al lado de inicio (arriba a la izquierda). Es el caso que la frase bajo el escenario describe como «la derecha queda vacía»; para llevar el conjunto al centro, añade justify-content: center al contenedor.

Compatibilidad con navegadores

A continuación figuran las primeras versiones compatibles según los datos de compatibilidad de navegadores de MDN. El código que genera esta herramienta no usa subgrid.

Errores frecuentes

• Las columnas de 1fr tienen anchos distintos. Una casilla contiene una URL larga o una imagen grande cuyo tamaño mínimo es mayor que su parte. Cámbialo por minmax(0, 1fr) y haz que el texto que sobresale se parta en líneas por separado.
• Cuatro pistas de 25 % se desbordan. Los huecos no entran en las pistas con %. Con un hueco de 16px sobran 48px, así que usa repeat(4, 1fr).
• Una fila de 1fr no crece. Si el alto del contenedor es auto, no hay alto sobrante que repartir. Dale un alto, por ejemplo con height o min-height: 100dvh.
• Se ignora todo grid-template-areas. O bien las cadenas tienen distinto número de casillas, o bien un nombre no forma un rectángulo.
• En pantallas estrechas, las tarjetas se salen por el lateral. minmax(240px, 1fr) mantiene los 240px aunque el elemento padre sea más estrecho. Cámbialo por minmax(min(100%, 240px), 1fr).
• Aparece una columna de más y hay scroll horizontal. Un span mayor que el número de columnas crea una columna implícita. Ocurre sobre todo en columnas automáticas con anchos estrechos, así que compruébalo con el botón 360.
• Tras rellenar con dense, el orden de lectura se descuadra. Solo ha cambiado el orden visual. En una lista donde el orden importa, desactiva dense o corrige el orden del HTML.

Límites y precauciones

• El escenario muestra únicamente la escritura horizontal de izquierda a derecha.
• Las áreas del escenario contienen solo su nombre y llevan min-width: 0 y overflow: hidden para que el texto no ensanche las pistas. El código básico solo incluye propiedades de maquetación y no lleva estas dos líneas, así que incluso el mismo nombre puede ensanchar una columna 1fr, cuyo mínimo es auto, hasta el ancho del texto. Si activas «Incluir estilo de la vista previa», se añaden estas dos líneas junto con el relleno, el borde y el tamaño de letra del escenario, y el código se dibuja al mismo tamaño. Con contenido real, las pistas auto, min-content y fr tendrán otro tamaño.
• Se pueden crear hasta 12 pistas explícitas en columnas y otras 12 en filas, y hasta 24 áreas. El código no incluye líneas con nombre, números de línea negativos, subgrid, grid-auto-columns, justify-content ni align-content, justify-self ni align-self por área, ni media queries.
• El valor del campo Alto es el alto del contenido sin el relleno. El height del código se escribe con el mismo sentido (content-box).
• Los botones 768, 480 y 360 cambian el ancho del contenedor. Eso no es lo mismo que una media query, que se basa en el ancho de la pantalla (viewport).
• La explicación de fr vuelve a calcular a partir del tamaño de pista que ha dibujado el navegador. Si difieren en más de 0.6px, avisa de que la fórmula es aproximada.
• «Copiar enlace» guarda también los nombres de área en la dirección.

Fecha de referencia El módulo W3C CSS Grid Layout Module Level 2 (Candidate Recommendation Draft 2025-03-26) y los datos de compatibilidad de navegadores de MDN se comprobaron en sus textos originales el 2026-10-21. Los anchos de columna de las tablas se midieron en un contenedor grid real en Chromium 151.

Fuentes

• 01W3C: CSS Grid Layout Module Level 2Candidate Recommendation Draft 2025-03-26. §6.6 tamaño mínimo automático de los elementos de la cuadrícula, §7.2.1 tamaño de pistas (una fr fuera de minmax() tiene mínimo auto), §7.2.3.2 número de repeticiones de auto-fill y auto-fit y plegado de pistas vacías, §7.3 grid-template-areas (la declaración no es válida si las áreas no son rectángulos), §7.5 cuadrícula implícita y grid-auto-rows, §7.7 dense en grid-auto-flow, §11.1 huecos (huecos de las pistas plegadas), §12.7.1 cálculo del tamaño de fr (factores que suman menos de 1, nuevo cálculo tras excluir las pistas con mínimo mayor)
• 02MDN: grid-template-columnsSintaxis de los valores de pista y tabla de compatibilidad de navegadores: Chrome 57, Firefox 52, Safari 10.1; subgrid en Chrome 117, Firefox 71, Safari 16
• 03MDN: grid-template-areasSintaxis de los nombres de área y tabla de compatibilidad de navegadores: Chrome 57, Firefox 52, Safari 10.1
• 04MDN: gapTabla de compatibilidad de navegadores: en maquetación Grid, Chrome 66, Firefox 61, Safari 12
• 05MDN: min()Tabla de compatibilidad de navegadores: Chrome 79, Firefox 75, Safari 11.1

Preguntas frecuentes

Herramientas relacionadas