The CSS Grid Overlay bookmarklet is a powerful tool for web developers to visually inspect the grid layout on any webpage.
Visualize CSS Grid Layouts Instantly
This bookmarklet provides a quick and easy way to see the grid structure of elements styled with CSS Grid, helping developers debug and optimize their layouts.
javascript:!function(){const n=document.querySelectorAll('[style*="display: grid"]'),e=document.createElement("div");e.style.cssText="\n position: fixed;\n top: 20px;\n right: 20px;\n padding: 15px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n z-index: 10000;\n ",e.innerHTML=`\n <div style="margin-bottom: 10px;">\n <strong>CSS Grid Elements Found: ${n.length}</strong>\n <button onclick="this.parentElement.parentElement.remove()" style="float:right;margin-left:10px;">×</button>\n </div>\n <div style="color: ${n.length?"#4CAF50":"#ff4444"}">\n ${n.length?"Grid elements detected and highlighted":"No grid elements found on page"}\n </div>\n `,document.body.appendChild(e),n.forEach((n=>{const e=document.createElement("div");e.style.cssText="\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 255, 0, 0.2);\n pointer-events: none;\n z-index: 9999;\n ",n.style.position="relative",n.appendChild(e)}))}();Drag me to bookmark bar: 👉🏻 CSS Grid Overlay
- Highlights all elements using CSS Grid
- Adds a semi-transparent overlay for easy visualization
- Works on any webpage with grid layouts
- Helps in debugging and optimizing grid designs
- Simple to use with a single click
Why Use CSS Grid Overlay? #
The CSS Grid Overlay bookmarklet is essential for developers who want to ensure their grid layouts are functioning as intended. It saves time by providing immediate visual feedback, allowing for quick adjustments and improvements.
- Previous: CSS Class Inspector
- Next: Delete Cookies