Cómo se usa
- Escriba las Columnas (tamaños de pista) y las Filas (tamaños de pista). Para dos columnas, 200px 1fr da una barra lateral fija y un área principal flexible.
- Fije la Separación entre columnas (px) y la Separación entre filas (px), y dé al contenedor un Nombre de la clase.
- Escriba un nombre en Nombre del área a pintar, deje seleccionado Pintar y pulse las celdas que pertenecen a esa área. Elija Borrar para quitar celdas.
- Copie el cuadro CSS, o revise la Vista previa, antes de pegar las reglas en su hoja de estilos.
Tamaños de pista y repeat()
Cada pista es un tamaño de la cuadrícula: una longitud en px o un porcentaje, un tamaño flexible en fr que reparte el espacio sobrante en proporción a su número, auto, min-content o max-content. Un minmax(mínimo, máximo) da a una pista un intervalo. La especificación CSS Grid Layout (en inglés) describe cómo se dimensiona cada una.
repeat(3, 1fr) escribe la misma pista tres veces. repeat(auto-fill, minmax(200px, 1fr)) crea tantas pistas como quepan en el ancho de la caja. Como ese número depende de la caja, cada pista de una repetición auto-fill o auto-fit necesita un tamaño fijo, y la herramienta no puede dibujar áreas con nombre sobre ella.
grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: row-gap column-gap;Áreas con nombre
La propiedad grid-template-areas recibe una cadena por cada fila de la cuadrícula. Los nombres de una cadena son las celdas de esa fila, y un punto representa una celda que no está en ningún área. Cada nombre debe ocupar un solo rectángulo, porque el navegador no puede colocar un nombre en forma de L ni en dos bloques separados.
El contenedor coloca los nombres en la cuadrícula, y cada hijo ocupa su lugar con grid-area. La herramienta escribe una regla por cada nombre, para que el elemento con esa clase ocupe sus celdas.
- Use una fila de nombres por cada fila de pistas, con el mismo número de nombres en cada fila.
- Elija nombres que describan la parte de la página, como header, sidebar o main, porque las reglas se escriben con esos nombres como clases.
Ejemplo resuelto: una página con cabecera, barra lateral, contenido y pie
El diseño por defecto tiene dos columnas, de 200px y una 1fr flexible, y tres filas: auto para la cabecera, 1fr para el centro y auto para el pie. La separación es de 16 px en ambos sentidos. La cabecera ocupa las dos columnas, la barra lateral y el contenido principal comparten la fila central, y el pie ocupa las dos columnas en la parte inferior.
El CSS empieza con .layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; } y después grid-template-areas con tres filas: "header header", "sidebar main" y "footer footer". Cada nombre tiene su propia regla con grid-area, así que el elemento de cabecera ocupa la primera fila.
Preguntas frecuentes
¿Cuál es la diferencia entre fr y auto?
Una pista fr comparte el espacio que queda tras las pistas fijas, en proporción a su número, así que 1fr 2fr da a la segunda pista el doble de ancho que a la primera. Una pista auto tiene el ancho que necesita su contenido y después reparte el espacio sobrante.
¿Por qué no puedo pintar áreas sobre pistas auto-fill?
auto-fill y auto-fit deciden el número de pistas según el ancho de la caja, así que el número de celdas no se conoce mientras edita. Las áreas con nombre necesitan un número fijo, así que la herramienta le pide quitar auto-fill o auto-fit cuando hay áreas pintadas.
¿Por qué cada área tiene su propia regla?
grid-template-areas coloca los nombres en la cuadrícula, pero cada elemento debe indicar aún qué celda ocupa, y eso lo hace grid-area. La herramienta escribe una regla por cada nombre, con una clase del mismo nombre.
¿Qué pasa con las celdas que no pinto?
Una celda que no está en ningún área se escribe como un punto en grid-template-areas. Ninguna área la ocupa, así que queda vacía, salvo que coloque allí un elemento de otra forma.
¿Qué navegadores admiten CSS Grid?
CSS Grid lo admiten todos los navegadores principales actuales. Si sus visitantes usan versiones antiguas, compruebe el diseño en esas versiones antes de fiarse de las áreas con nombre.
¿Se guarda o se envía mi diseño?
No. La cuadrícula, la vista previa y el CSS se generan en su navegador. No se guarda nada ni se envía a nuestro servidor, así que copie el CSS antes de salir de la página.
Fuentes
- W3C (en inglés): CSS Grid Layout Module Level 1
- W3C (en inglés): CSS Grid Layout Level 1, grid-template-areas
- W3C (en inglés): CSS Gaps Module Level 1, la abreviatura gap
- MDN (en inglés): grid-template-areas
Cifras y texto revisados por última vez el martes, 10 de noviembre de 2026.