CSS Grid Overlay

About

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.