Generador de rejilla CSS

Cómo usar

1. Define las dimensiones de la cuadrícula: introduce el número de columnas y filas de tu diseño.
2. Define las pistas: ajusta el ancho de cada columna y el alto de cada fila con unidades fr, píxeles, porcentajes, auto o minmax().
3. Copia el CSS: las propiedades display: grid, grid-template-columns, grid-template-rows y gap generadas están listas para pegarse en tu hoja de estilo.

¿Por qué usar el generador CSS Grid?

CSS Grid es el sistema de maquetación más potente de CSS, capaz de crear diseños bidimensionales complejos que antes exigían tablas, floats o JavaScript. Pero dominar grid-template-columns, las unidades fr, minmax(), repeat() y las zonas con nombre exige práctica. Este generador visual te permite construir cualquier cuadrícula por clic y arrastre, y luego produce un CSS limpio para usar de inmediato o estudiar para profundizar tu comprensión de Grid.

Funcionalidades

• Constructor visual de cuadrícula: haz clic para definir visualmente las pistas de columnas y filas.
• Compatibilidad con unidades fr: usa unidades fr flexibles para columnas proporcionales responsivas.
• Atajo minmax(): crea fácilmente columnas responsivas con restricciones de tamaño mínimo y máximo.
• Control del espacio: ajusta column-gap y row-gap de forma independiente.
• Áreas con nombre: define grid-template-areas con una interfaz visual de pintura de áreas.

Preguntas frecuentes

¿Qué es una unidad «fr» en CSS Grid?

La unidad fr (fracción) reparte el espacio disponible proporcionalmente. En una cuadrícula de 3 columnas con 1fr 2fr 1fr, la columna central recibe el doble de espacio que las exteriores. Las unidades fr se reparten el espacio restante tras asignar las pistas de tamaño fijo.

¿Cómo crear una cuadrícula responsiva sin media queries?

Usa repeat(auto-fill, minmax(200px, 1fr)) como valor de grid-template-columns. Crea tantas columnas como permita el tamaño mínimo, extendiéndose para llenar el espacio disponible. Los elementos se reorganizan automáticamente cuando cambia el ancho del contenedor.

¿Cuál es la diferencia entre grid-template y grid-auto?

grid-template-columns/rows define las pistas explícitas que especificas. grid-auto-columns/rows define el tamaño de las pistas implícitas, columnas y filas creadas automáticamente cuando los elementos desbordan la cuadrícula explícita.

Una breve historia de CSS Grid

Antes de CSS Grid, las maquetaciones web atravesaron tres épocas dolorosas. Maquetaciones basadas en tablas (1995-2008) abusaban del elemento <table> con fines de estructura visual, con el «troceado» de composiciones de Photoshop en cuadrículas HTML. Maquetaciones basadas en flotantes (2008-2013) reemplazaron las tablas por la propiedad float, requiriendo trucos «clearfix» como el micro-clearfix de Nicolas Gallagher (2011) para contener hijos con salto de línea. Flexbox (CSS Flexible Box Layout Module Level 1, Recomendación W3C 2018) resolvió las maquetaciones unidimensionales pero tenía dificultades con verdaderas cuadrículas bidimensionales. La historia de CSS Grid comenzó con la implementación -ms-grid de Microsoft en Internet Explorer 10 (2012), una versión temprana que informó la especificación W3C. El primer borrador público de trabajo W3C de CSS Grid Layout Module Level 1 apareció en abril de 2011, pero el impulso real vino del trabajo de defensa de Rachel Andrew (su libro Get Ready for CSS Grid Layout, 2016) y Jen Simmons (defensora-desarrolladora de Mozilla, circuito de conferencias 2016-2018). La carrera entre navegadores se resolvió en una notable ventana de dos meses en marzo de 2017: Chrome 57, Firefox 52, Safari 10.1 y Edge 16 entregaron Grid sin prefijos con semanas de diferencia. El W3C marcó Grid Level 1 como Recomendación Candidata en diciembre de 2016; la Recomendación W3C final llegó en agosto de 2020. Subgrid (Level 2) llegó en Firefox 71 (dic. 2019), Safari 16 (sept. 2022) y Chrome 117 (sept. 2023). La próxima frontera es la maquetación Masonry propuesta (propuesta del CSS Working Group 2020, tras flag en Firefox desde 2021).

La anatomía de una cuadrícula CSS

• El contenedor de cuadrícula. display: grid (o display: inline-grid) convierte cualquier elemento en un contexto de cuadrícula. Los hijos directos de ese elemento se convierten en «elementos de cuadrícula» y participan en la maquetación de la cuadrícula. Los nietos no se ven afectados a menos que también establezcan display: grid.
• grid-template-columns y grid-template-rows. Definen las pistas explícitas (columnas y filas). Los valores pueden ser fijos (px, em, rem), flexibles (fr, la unidad «fracción» definida en la especificación de CSS Grid), dimensionados al contenido (auto, min-content, max-content), o cualquier combinación. grid-template-columns: 200px 1fr 1fr crea una barra lateral de 200px más dos columnas flexibles iguales.
• La unidad fr. La unidad de fracción distribuye el espacio restante después de que las pistas de tamaño fijo se asignan. 1fr 2fr 1fr da a la columna central el doble del espacio sobrante de las columnas laterales. fr es exclusiva de Grid (y el equivalente relacionado flex-basis: 0 1 fr en Flexbox no es lo mismo). Resuelve aquello con lo que el patrón de «columna porcentual» luchó durante décadas: distribución limpia del espacio sobrante.
• repeat() y minmax(). repeat(3, 1fr) define de forma compacta tres columnas iguales. minmax(200px, 1fr) restringe una pista a un rango. La combinación estrella grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) produce una cuadrícula responsiva que se ajusta automáticamente al número de columnas para encajar en el contenedor, sin consultas de medios. Esta única línea reemplazó miles de definiciones de puntos de ruptura en CSS de producción.
• grid-template-areas. Una sintaxis de cadenas dispuestas visualmente que nombra las regiones de la cuadrícula. Los hijos se adhieren a un área nombrada con grid-area: header. El resultado es maquetación-como-arte-ASCII: cualquiera que lea el CSS puede visualizar la cuadrícula desde la fuente. Particularmente potente para la maquetación «santo grial» (cabecera / barra lateral / principal / aside / pie) que derrotó a los diseñadores CSS durante una década.
• gap (y column-gap, row-gap). Define el espaciado entre pistas. gap: 16px espacia uniformemente todas las filas y columnas. Antes de Grid, esto requería frágiles patrones padding+margin o márgenes negativos cuidadosamente calculados. La misma propiedad gap se añadió luego a Flexbox (universalmente soportada desde 2022) y ahora se considera la forma canónica de manejar el espaciado entre elementos en el CSS moderno.

Patrones Grid del mundo real

• Galerías de imágenes. El patrón repeat(auto-fill, minmax(200px, 1fr)) es el CSS dominante para sitios de portafolio (cuadrículas de Behance), galerías de fotos (estilo Unsplash) y colecciones de productos. La auto-adaptación del número de columnas sin consultas de medios era prácticamente imposible antes de Grid.
• Paneles de control y paneles de administración. Grafana, Datadog, Stripe Dashboard y la mayoría de las interfaces de administración modernas usan áreas de cuadrícula nombradas para posicionar tarjetas, barras laterales y regiones de contenido. Los constructores de paneles arrastrar-y-soltar (DataDog, Looker, Tableau) traducen las acciones del usuario a mutaciones de cadenas grid-template-areas.
• Maquetaciones de tipo revista. Sitios editoriales (The Guardian, NYT, Vox) usan Grid para maquetaciones asimétricas con elementos superpuestos, grandes imágenes héroe que abarcan múltiples columnas y citas pull-quote que salen de la columna de texto principal. El eje z de Grid (z-index con áreas explícitas) maneja la superposición de forma natural.
• Cuadrículas de tarjetas de producto. Escaparates de Shopify, Amazon, Etsy. El patrón es tan común que Tailwind CSS, Bootstrap y Bulma entregan componentes de tarjetas basados en Grid como parte de su conjunto de utilidades principales. La relación de aspecto de las tarjetas ahora típicamente se bloquea con la propiedad aspect-ratio (Safari 15, Chrome 88, 2021).
• La maquetación «santo grial». Cabecera / barra lateral izquierda / contenido principal / barra lateral derecha / pie. Esta maquetación de 5 regiones fue el problema sin resolver del CSS durante 15 años. Con grid-template-areas y 8 líneas de CSS, se volvió trivial en 2017. El patrón domina los sitios de documentación (Stripe Docs, MDN, Vercel Docs).
• Maquetaciones de formularios. Formularios de dos columnas con etiquetas a la izquierda e inputs a la derecha, formularios de dirección con ciudad/estado/código postal en una fila, asistentes multi-paso. Grid permite que etiquetas e inputs se alineen limpiamente a través de filas incluso cuando los anchos de contenido varían. El patrón reemplazó enfoques anteriores basados en trucos de ancho de etiqueta con CSS más limpio.
• Posicionamiento de modales y diálogos. display: grid; place-items: center; en una capa de ventana completa centra perfectamente un diálogo horizontal y verticalmente con una sola línea, reemplazando décadas de patrones position: absolute; top: 50%; transform: translateY(-50%);. place-items es la forma canónica 2024 de centrar contenido arbitrario.
• Responsivo sin consultas de medios. Combinar repeat(auto-fill, minmax(...)) con gap produce maquetaciones que se adaptan al ancho del contenedor sin ninguna consulta de medios. Es la base del diseño responsivo moderno: maquetaciones que responden al tamaño del contenedor en lugar del tamaño del viewport, anticipando las Container Queries (ahora también entregadas, 2023).

Estándares e hitos

• IE10 -ms-grid (2012). Microsoft entregó la primera implementación tipo Grid, diseñada por Phil Cupp en Microsoft. La sintaxis difería de la especificación W3C eventual pero demostró el concepto e influyó en las decisiones de diseño posteriores.
• CSS Grid Layout Module Level 1, Borrador de Trabajo W3C (abril de 2011). El primer borrador público W3C. Siguieron múltiples iteraciones; la sintaxis evolucionó significativamente entre 2011 y la implementación final de 2017.
• Defensa de Rachel Andrew y Jen Simmons (2014-2017). El libro de Andrew Get Ready for CSS Grid Layout (Smashing Magazine, 2016) y las charlas de conferencia de Simmons como defensora-desarrolladora de Mozilla construyeron la base de conocimiento comunitario que hizo viable el envío por parte de los navegadores. Ambas son acreditadas en las notas de editor W3C de la especificación.
• Carrera de navegadores, marzo de 2017. Dentro de una notable ventana de dos meses, Chrome 57 (9 de marzo), Firefox 52 (7 de marzo), Safari 10.1 (27 de marzo) y Edge 16 (octubre de 2017) entregaron Grid sin prefijos. Este nivel de envío sincronizado entre navegadores fue casi sin precedentes para una característica de esta complejidad.
• Recomendación Candidata (diciembre de 2016). CSS Grid Level 1 fue promovida a Recomendación Candidata W3C, la etapa final antes de la Recomendación W3C. La fase CR típicamente toma años; Grid se movió más rápido que la mayoría de las características CSS en esta etapa.
• Recomendación W3C (agosto de 2020). Grid Level 1 fue finalizada como Recomendación W3C. Esta es técnicamente la fecha de «lanzamiento» de la especificación, pero todos los navegadores principales habían entregado una implementación funcional tres años antes.
• Subgrid (Level 2, 2019-2023). Subgrid permite que un elemento de cuadrícula herede las definiciones de pistas de su padre, resolviendo el problema de «alineación de cuadrículas anidadas». Firefox 71 (dic. 2019), Safari 16 (sept. 2022), Chrome 117 (sept. 2023). El lento despliegue de Chrome reflejó la complejidad de implementación.
• Maquetación Masonry (propuesta, 2020-). El CSS Working Group ha estado debatiendo la sintaxis desde 2020. Firefox la entregó tras un flag en 2021. Las maquetaciones fluyentes estilo Pinterest que empaquetan elementos en columnas son el caso de uso objetivo. El equipo de Chrome (liderado por Apple) y el equipo de Mozilla han propuesto sintaxis competidoras; resolución pendiente a partir de 2024.

Preguntas frecuentes adicionales

¿Cuándo debo usar Grid frente a Flexbox?

El atajo comunitario: Flexbox es para una dimensión, Grid para dos. Si estás disponiendo una fila de botones o alineando elementos en una sola dirección, Flexbox es más simple. Si estás diseñando una maquetación de página completa con filas y columnas que deben alinearse, Grid es la herramienta correcta. Muchas maquetaciones reales combinan ambos: Grid para el esqueleto de la página, Flexbox para la alineación a nivel de componente dentro de cada área de cuadrícula. Los frameworks modernos (Tailwind, Bootstrap 5) adoptan este patrón.

¿Funciona CSS Grid en navegadores antiguos?

Todos los navegadores evergreen (Chrome, Firefox, Safari, Edge) soportan Grid desde marzo de 2017. Internet Explorer 11 sólo tiene la sintaxis antigua -ms-grid (subconjunto, prefijado, faltando muchas características). Para soporte de IE11, usa consultas @supports para volver a Flexbox o maquetaciones basadas en flotantes. A partir de 2024, IE11 tiene menos del 0,5 % de uso global, así que la mayoría de los equipos han abandonado el fallback. Caniuse.com informa más del 97 % de soporte global para Grid sin prefijos.

¿Cuál es la diferencia entre grid-template-areas y grid-area?

grid-template-areas se establece en el contenedor de cuadrícula y mapea visualmente las regiones nombradas de la cuadrícula (una cadena por fila). grid-area se establece en un elemento de cuadrícula para asignarlo a una de esas regiones nombradas. Ambos trabajan juntos: el contenedor declara el «mapa», los elementos declaran «soy la región X». También puedes usar grid-area directamente con números de líneas (grid-area: 1 / 1 / 3 / 4) en lugar de nombres, lo que es útil para maquetaciones dinámicas.

¿Qué es subgrid y cuándo debo usarlo?

Subgrid permite que una cuadrícula anidada herede las definiciones de pistas de su cuadrícula padre en lugar de crear las suyas propias. Esto resuelve el problema de alinear elementos a través de cuadrículas anidadas, por ejemplo, una tarjeta con maquetación interna que debe alinearse con tarjetas circundantes. Usa grid-template-columns: subgrid en la cuadrícula anidada. Disponible en Firefox 71+ (dic. 2019), Safari 16+ (sept. 2022), Chrome 117+ (sept. 2023). Retrocede a una cuadrícula anidada normal en navegadores que no la soportan.

¿Cómo interactúa Grid con la accesibilidad?

La colocación con Grid no cambia el orden de origen del DOM: los elementos aparecen en la posición visual que asignas, pero los lectores de pantalla y el orden de tabulación por teclado siguen la fuente. WCAG 2.1 SC 1.3.2 Secuencia significativa requiere que el orden de origen tenga sentido cuando se eliminen los estilos. La implicación: diseña primero tu fuente DOM para un orden de lectura lógico, luego usa Grid para colocar los elementos visualmente. Si reordenas elementos drásticamente con grid-column: 3 / 5; grid-row: 2, audita con un lector de pantalla para confirmar que el orden hablado todavía tiene sentido.