Generador de Grid CSS

Cómo usar el generador de Grid CSS

1. Define el número de columnas y filas y dale a cada pista un tamaño (1fr, 200px, auto, min-content y más).
2. Ajusta el espacio de fila y el espacio de columna, se colapsan a un solo valor gap cuando son iguales.
3. Escribe un nombre (como header o sidebar) y pulsa + Add area, luego pinta celdas en el grid para colocar esa área. Haz clic y arrastra para rellenar un rectángulo; usa Erase para borrar celdas.
4. Elige un estilo de salida, Áreas de plantilla (grid-template-areas) o Basado en líneas (spans de grid-column / grid-row).
5. Observa cómo la vista previa en vivo se actualiza al instante y pulsa Copy CSS y Copy HTML para pegar ambos en tu proyecto.

Todo funciona localmente en tu navegador, sin subidas, sin cuenta, sin ida y vuelta al servidor.

Diseña maquetaciones de grid visualmente en lugar de contar líneas

CSS Grid es el sistema de maquetación más potente de la web, pero escribir grid-template-areas a mano es delicado: cada cadena de fila necesita exactamente una palabra por columna, cada área con nombre tiene que formar un rectángulo perfecto y una sola palabra desalineada rompe silenciosamente toda la maquetación. Esta herramienta convierte eso en un trabajo visual, pintas regiones sobre un grid, observas la vista previa y solo ves el CSS generado cuando ya se ve bien.

• Las áreas de plantilla con nombre te dejan bosquejar una página como "header header header" / "sidebar main main" / "footer footer footer", la maquetación se lee como un mapa de la página, por eso es la forma más amigable de empezar con Grid.
• La validación de rectángulos está integrada. Un área de grid debe ser un rectángulo sólido; en cuanto pintas una forma en L o partes un nombre en dos bloques desconectados, la herramienta lo marca y lo deja fuera de la salida en lugar de darte CSS que el navegador rechazaría.
• Dos estilos de salida describen la misma maquetación: grid-template-areas con nombres grid-area, o colocación explícita por líneas grid-column: 2 / span 2 / grid-row. Cambia entre ellos cuando quieras.

Pistas, espacios y unidades

Las columnas y filas se definen como pistas. Las unidades fraccionarias (fr) reparten el espacio sobrante de forma proporcional: 1fr 2fr da un grid de dos columnas donde la segunda es el doble de ancha. Las unidades fijas como px, em, rem y % fijan una pista a un tamaño concreto, mientras que auto, min-content y max-content la ajustan a su contenido. Los espacios de fila y columna son independientes, así que puedes tener columnas ajustadas y filas amplias, o al revés.

La regla del rectángulo, y con cuánta firmeza la impone este constructor

CSS exige que cada área con nombre ocupe un rectángulo macizo. Una forma de L, o el mismo nombre pintado en dos bloques inconexos, es inválida, y un navegador que se encuentra un valor de grid-template-areas inválido descarta la declaración entera en lugar de salvar las partes que estaban bien.

El generador se niega a ponerte en esa situación, y merece la pena saber con qué contundencia. En el momento en que cualquier área deja de ser rectangular, un aviso la nombra y la salida pierde no solo esa área sino el bloque grid-template-areas completo y todas las reglas por área que lo acompañan. El panel de HTML cambia al mismo tiempo a celdas numeradas genéricas. Es una decisión deliberada de todo o nada: una salida parcial parecería plausible y se comportaría mal.

Unidades de pista, y el campo numérico que desaparece con una palabra clave

Cada columna y cada fila es una pista con dos controles, un número y una unidad. La lista de unidades es fr, px, %, em, rem, vw, vh, auto, min-content y max-content, y las tres últimas ocultan el campo numérico, porque una pista de palabra clave no admite valor. Una fila mixta se escribe exactamente como la teclearías, así que una barra lateral de 200px, un centro flexible y un raíl dimensionado por contenido salen como 200px 1fr min-content.

Los números se limpian al entrar. Los valores negativos pasan a cero, y cualquier cosa con más de cuatro decimales se redondea. Los espacios usan su propia lista de unidades, más corta, de px, em, rem y %, con el espacio de fila y el de columna fijados por separado. Cuando ambos coinciden, la salida colapsa al atajo de un solo valor; cuando difieren obtienes la forma de dos valores en orden fila y luego columna, así que un espacio de fila holgado de 24 píxeles con columnas apretadas de 8 se escribe como gap: 24px 8px.

Los nombres de área también se sanean al entrar, porque tienen que sobrevivir como identificadores CSS. Todo lo que no sea letras, dígitos, guiones y guiones bajos se elimina, así que mi area se convierte en miarea, mientras que barra-lateral pasa intacto. Esto importa en español más de lo que parece: un nombre como cabecera-principal va perfectamente, pero uno con eñe o con acento perderá esos caracteres, así que conviene nombrar las áreas sin ellos desde el principio. Un nombre que empiece por dígito o por guion no puede ser un identificador en absoluto, así que el campo simplemente se vacía.

Áreas de plantilla o números de línea explícitos, la misma maquetación de las dos formas

Cambiar el estilo de salida a basado en líneas describe exactamente la misma disposición con propiedades distintas. El bloque grid-template-areas desaparece del contenedor, y cada hijo recibe una colocación de línea explícita calculada a partir de donde lo pintaste: la cabecera pasa a ser grid-column: 1 / span 3 con grid-row: 1 / span 1, la barra lateral ocupa la columna 1 de la fila 2, y el contenido principal abarca las columnas 2 a 3 de esa fila.

Ninguno de los dos estilos es mejor. Las áreas de plantilla se leen como un mapa de la página y son más fáciles de pasarle a otra persona. La colocación por líneas es más fácil de sobrescribir en una media query, donde a menudo quieres mover un solo hijo sin reescribir el contenedor. Como ambos se derivan de la misma matriz pintada, puedes alternar entre ellos en cualquier momento y comparar.

Cuando la maquetación esté cerrada, el Minificador de CSS comprimirá la hoja de estilos, el Generador de Gradientes CSS se encarga de los fondos que van dentro de estas celdas, y el Generador de Tablas HTML es la mejor herramienta cuando el contenido son datos genuinamente tabulares y no estructura de página.

El HTML encaja con el CSS

Cada maquetación viene con un HTML de ejemplo cuyos nombres de clase coinciden exactamente con el CSS generado. En el modo áreas de plantilla obtienes un <div class="grid-area-header"> por cada región con nombre; sin áreas con nombre obtienes celdas numeradas <div class="grid-item"> que fluyen en el grid automáticamente. Pega juntos el CSS y el HTML y la maquetación se renderiza de inmediato, sin renombrar, sin adivinar.

Usos habituales

• Estructuras de página: maquetaciones header / sidebar / main / footer.
• Cuadros de mando (dashboards) y grids de interfaz basados en tarjetas.
• Galerías de fotos y muros de imágenes estilo masonry.
• Tablas de precios y grids de comparación de características.
• Formularios responsivos que se reordenan según el número de columnas.