⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Diseño de cuadrícula CSS del Santo Grial: código listo

Diseñe diseños de cuadrícula CSS visualmente: establezca columnas, filas y espacios, luego escriba nombres de áreas en celdas para crear áreas de plantilla de cuadrícula, con una vista previa en vivo y CSS y HTML copiables.

Escriba un nombre en cualquier celda a continuación; las celdas con el mismo nombre se fusionan en una región de áreas de plantilla de cuadrícula.

Procesando... 0%

Resultado

Esta página abre el generador de cuadrícula precargado con el diseño del Santo Grial: tres columnas y tres filas, con encabezado y pie de página que abarcan todo el ancho y una fila de navegación/principal/aparte en el medio. La fila del encabezado usa altura automática, la fila del medio llena el espacio restante y las dos columnas laterales se fijan en 200 px mientras que la columna principal ocupa el resto.

El diseño del Santo Grial se ganó su nombre porque era realmente difícil de construir de manera confiable antes de CSS Grid: años de trucos flotantes, diseños de tablas y posicionamiento absoluto intentaron falsificar esta forma exacta. Con grid-template-areas se colapsa en cinco regiones con nombre y un puñado de tamaños de pista, por lo que sigue siendo el primer ejemplo estándar para enseñar CSS Grid.

Todos los números y espacios en esta página siguen activos: reduzca las columnas laterales, agregue una cuarta fila o cambie el nombre de un área y la vista previa y el CSS copiable se actualizarán inmediatamente. Copie los bloques CSS y HTML directamente en su proyecto: todo se ejecuta localmente en su navegador, no se carga nada.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • Entradas numéricas para 1 a 6 columnas y filas, además de controles separados de espacio entre columnas y filas que se combinan en un valor de espacio cuando coinciden.
  • Un modo de áreas con nombre: escriba el nombre de un área directamente en cualquier celda de la cuadrícula en vivo; la herramienta crea una cadena válida de áreas de plantilla de cuadrícula y advierte cuando los nombres no forman rectángulos limpios.
  • Bloque CSS copiable (visualización: cuadrícula, columnas/filas de plantilla de cuadrícula, espacio, áreas de plantilla de cuadrícula) más un esqueleto HTML coincidente con un div de área de cuadrícula por región nombrada.

Beneficios clave

✓ Escriba un nombre directamente en cualquier celda y los nombres coincidentes se fusionarán en una región de áreas de plantilla de cuadrícula, sin necesidad de arrastrar la selección ni de adivinar la sintaxis de la cadena entre comillas a mano.
✓ La cuadrícula de vista previa en vivo cambia de tamaño y color con cada cambio, para que pueda ver las pistas exactas de columnas y filas y cada región con nombre antes de copiar una sola línea de CSS.
✓ Los ajustes preestablecidos como el diseño clásico del Santo Grial y una barra lateral estrecha le brindan una declaración real y funcional de áreas de plantilla de cuadrícula para comenzar en lugar de una cuadrícula en blanco.

Casos de uso

  • • Cree el clásico shell de página del Santo Grial (encabezado y pie de página de ancho completo con una fila central de navegación/principal/aparte) escribiendo nombres de áreas en lugar de escribir a mano áreas de plantilla de cuadrícula.
  • • Diseñe una página de configuración o un panel de administración con una barra lateral de ancho fijo junto a una columna de contenido flexible y copie el CSS y HTML exactos una vez que la vista previa en vivo se vea bien.
  • • Verifique que un conjunto de áreas con nombre realmente forme rectángulos válidos antes del envío: la herramienta marca los nombres exactos que romperían las áreas de plantilla de cuadrícula en el navegador.