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

Barra lateral + Diseño de cuadrícula CSS de contenido

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 con un diseño de dos columnas y una fila ya nombrado: una columna de barra lateral de 200 píxeles junto a una columna de contenido flexible que ocupa el espacio restante. Ambas áreas son visibles inmediatamente en la vista previa en vivo, coloreadas y etiquetadas para que la división sea obvia de un vistazo.

Esta es la forma de navegación más contenido más común en la web: las páginas de configuración, los sitios de documentación y los paneles de administración se apoyan en un riel de ancho fijo al lado de un área principal fluida. Debido a que la columna de la barra lateral usa un valor de píxel y la columna de contenido usa 1fr, la barra lateral mantiene un ancho constante mientras que la columna de contenido absorbe cada píxel adicional de la ventana gráfica.

Cambie el nombre de cualquiera de las áreas, cambie el ancho de la columna o agregue más filas para un encabezado encima de la división: la salida CSS y HTML a continuación rastrea cada edición en tiempo real. La herramienta es gratuita y sigue funcionando completamente en su navegador, sin carga ni cuenta.

🛡️
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.