CSS Grid Overlay

Visual grid system for web developers - Create custom column and row grids for any website

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.