CSS Grid Overlay icon

CSS Grid Overlay

by Chintan Savaliya

v1.0.0 Updated May 27, 2025 373KiB
CWS
209
Users
★ 5.00
2 reviews
#47687
of 207.5K
tools
#10808 of 64.5K

Description

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.
CSS Grid Overlay screenshot 1CSS Grid Overlay screenshot 2CSS Grid Overlay screenshot 3

Reviews

Loading reviews...

Permissions (3)

Permissions

activeTab Can access the current tab when you click the extension scripting Can inject scripts into web pages storage Can store data locally in your browser

Details

Version 1.0.0
Updated May 27, 2025
Size 373KiB
First Seen Mar 31, 2026