“Layout Grid Visualizer”的产品徽标图片

Layout Grid Visualizer

5.0(

4 个评分

)
扩展程序开发者工具70 用户
Layout Grid Visualizer的项目媒体 5(屏幕截图)
Layout Grid Visualizer的项目媒体 1(屏幕截图)
Layout Grid Visualizer的项目媒体 2(屏幕截图)
Layout Grid Visualizer的项目媒体 3(屏幕截图)
Layout Grid Visualizer的项目媒体 4(屏幕截图)
Layout Grid Visualizer的项目媒体 5(屏幕截图)
Layout Grid Visualizer的项目媒体 1(屏幕截图)
Layout Grid Visualizer的项目媒体 1(屏幕截图)
Layout Grid Visualizer的项目媒体 2(屏幕截图)
Layout Grid Visualizer的项目媒体 3(屏幕截图)
Layout Grid Visualizer的项目媒体 4(屏幕截图)
Layout Grid Visualizer的项目媒体 5(屏幕截图)

概述

A Chrome extension to visualize and customize grid layouts on webpages

🟦 Layout Grid Visualizer 🟦 A must-have Chrome extension for web developers and designers! Instantly overlay a fully customizable grid on any webpage to visualize, debug, and perfect your responsive layouts. ✨ Key Features: 🛠️ Customizable Grid Settings: Adjust grid width, number of columns, gutter size, color, and opacity to match your design system. 🧩 Split Grid Mode: Define custom column widths for advanced, non-uniform grid layouts. 🖱️ Grid Clickability Toggle: Make the overlay interactive or pass-through for seamless page interaction. 🎹 Keyboard Navigation: Move and position the grid overlay precisely using arrow keys (with Shift for larger steps). 💾 Persistent Overlay Position: The grid’s position is saved and restored per tab for a consistent workflow. 🛡️ Auto-correction & Tooltips: Invalid values are auto-corrected with helpful tooltips. ♿ Accessibility: Fully keyboard navigable with ARIA labels for an inclusive experience. ⚡ Instant Feedback: All changes update the grid in real time. 🔄 Reset to Defaults: One-click reset for all settings, including split grid state. 🚀 Performance Optimized: Efficient DOM updates and storage for a smooth experience. 🚀 How It Works: 1️⃣ Click the Layout Grid Visualizer icon in your Chrome toolbar. 2️⃣ Instantly overlay a grid on any webpage. 3️⃣ Customize grid settings and modes to fit your needs. 4️⃣ Use keyboard shortcuts or drag to reposition the overlay. 5️⃣ Toggle the grid on/off or reset to defaults anytime. 🌟 Why Choose Layout Grid Visualizer? Whether you’re building a new layout, debugging CSS, or reviewing responsive breakpoints, this extension gives you the power and flexibility to see your grids in action—no code changes required! 🔒 Privacy: No data is collected or shared. All settings are stored locally in your browser. 🔗 GitHub Source: https://github.com/grohon/layout-grid-visualizer

5 星(5 星制)4 个评分

详细了解结果和评价。

详情

  • 版本
    1.1
  • 上次更新日期
    2025年7月2日
  • 提供方
    Abu Foysal
  • 大小
    25.53KiB
  • 语言
    English
  • 开发者
    邮箱
    abu.foysal.dev@gmail.com
  • 非交易者
    该开发者尚未将自己标识为交易者。欧盟地区消费者须知:消费者权利可能不适用于您与该开发者达成的合约。

隐私权

该开发者已披露,此产品不会收集或使用您的数据。 如需了解详情,请参阅开发者的privacy policy

该开发者已声明,您的数据:

  • 不会因未获批准的用途出售给第三方
  • 不会为实现与产品核心功能无关的目的而使用或转移
  • 不会为确定信用度或放贷目的而使用或转移

支持

若有任何疑问、建议或问题,请在桌面浏览器中打开此页面

Google 应用