Generador CSS grid
Convierte un esquema de maquetación en texto en un grid CSS real con áreas nombradas.
Generador CSS grid
Pega un esquema rápido de maquetación y esta herramienta lo convierte en código CSS grid funcional. Escribe cada fila de la maquetación en su propia línea y repite la misma palabra en las celdas para marcar una región nombrada — "header header" en una línea, "nav main" en la siguiente, "footer footer" en la última describe una maquetación clásica de tres filas con encabezado y pie de página a ancho completo. La herramienta lee los nombres repetidos como áreas de grid y genera automáticamente la declaración grid-template-areas correspondiente.
Las opciones controlan el resto del CSS generado. Establece el espacio entre celdas en píxeles y opcionalmente proporciona anchos de columna o alturas de fila explícitas usando cualquier tamaño de pista CSS válido — unidades fr, auto o minmax(); deja cualquiera de los campos vacíos y la herramienta espaciará las pistas uniformemente. Activa las reglas por área para obtener una declaración grid-area lista para usar para cada sección nombrada, usando un prefijo de clase que elijas, así "header" se convierte en .grid-header de inmediato. Un interruptor responsive añade una media query max-width que colapsa la maquetación completa a una sola columna para pantallas estrechas, e un interruptor HTML añade un esqueleto de marcado coincidente para que puedas ver la estructura junto al CSS.
Si dos celdas con el mismo nombre no forman un rectángulo sólido — una forma de L o un nombre que omite una celda — CSS grid real no puede representar esa área correctamente, así que la herramienta lo marca directamente en la salida como un comentario de advertencia en lugar de generar reglas de aspecto inválido silenciosamente. Los finales de línea de cualquier sistema operativo se manejan de la misma manera, y el recuento vivo debajo de la salida rastrea cuántas filas de maquetación, áreas nombradas y caracteres contiene el CSS generado.
Todo se ejecuta localmente en tu navegador; la maquetación que dibujes y el CSS que obtengas nunca se envían a ningún lado. Copia el resultado, descárgalo como archivo .txt o envía la salida directamente a otra herramienta como el formateador CSS para afinar el sangrado aún más.