Css Grid Overlay

Visual Grid Overlay for Web Design & Dev

A flexible, privacy-first grid system built for designers and developers. Quickly create custom column and row grids—fine-tuned to your layout needs—right inside your browser.

🔧 Key Features
• 🎯 Custom Grids – Control columns and rows: count, gutter, margin, color, opacity
• 📱 Responsive Breakpoints – Toggle layouts for Desktop, Tablet, Mobile (Landscape & Portrait)
• 🚀 Live Editing – Adjust and preview changes instantly
• 🎨 Fully Customizable – Every detail is tweakable
• 💾 Per-Site Settings – Your grid config is saved per domain
• 🖤 Dev-Friendly UI – Dark mode to match your browser dev tools

⸻

⚙️ How to Use
1. Toggle Grid – Click the extension icon to turn the grid on or off
2. Pick a Breakpoint – Choose from Desktop, Tablet, Landscape (L), or Portrait (P)
3. Customize Columns:
• Count – 0–24 columns
• Gutter – Spacing between columns
• Margin – Outer padding
• Color & Opacity – Set visibility and look
4. Customize Rows – Same controls as columns
5. Reset – Revert to default settings anytime

⸻

📐 Breakpoints
• Desktop: ≥ 992px
• Tablet: 768–991px
• Mobile Landscape: 480–767px
• Mobile Portrait: ≤ 479px

Grids adapt automatically as you resize your browser.

⸻

💡 Tips
• Set column or row count to 0 to hide that grid
• Use low opacity (5–15%) for subtle overlays
• Choose different colors for columns and rows for clarity
• Settings are saved per domain and persist across sessions

⸻

🔒 Privacy-First by Design
• No data collection
• No tracking
• No remote storage
• Only runs on sites you activate it on
• All settings are saved locally on your device

⸻

🛠 Support
• Make sure the extension is enabled
• Refresh the page after installing
• Won’t work on Chrome internal pages (chrome://, chrome-extension://)

⸻

Made with ❤️ for web developers and designers.