Bookmarklets

CSS Grid Overlay

danger icon

Broken In progress

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 t="css-grid-overlay__overlay",e="data-css-grid-overlay-applied",o="data-css-grid-overlay-prev-position",n="css-grid-overlay__panel",r=document.querySelectorAll("."+t),i=document.getElementById(n);if(r.length||i)return r.forEach((function(t){t.remove()})),document.querySelectorAll("["+e+'="1"]').forEach((function(t){const n=t.getAttribute(o);null!==n?(t.style.position=n,t.removeAttribute(o)):t.style.position="",t.removeAttribute(e)})),void(i&&i.remove());const l=Array.prototype.filter.call(document.querySelectorAll("*"),(function(t){const e=window.getComputedStyle(t);return"grid"===e.display||"inline-grid"===e.display})),s=document.createElement("div");s.id=n,s.style.cssText="position:fixed;top:20px;right:20px;padding:15px;background:white;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.1);z-index:2147483647;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;",s.innerHTML='<div style="margin-bottom:10px;"><strong>CSS Grid Elements: '+l.length+'</strong><button style="float:right;margin-left:10px;" aria-label="Close">×</button></div><div style="color:'+(l.length?"#4CAF50":"#ff4444")+';">'+(l.length?"Highlighted grid containers. Click × to remove.":"No grid containers found.")+"</div>",s.querySelector("button").onclick=function(){document.querySelectorAll("."+t).forEach((function(t){t.remove()})),document.querySelectorAll("["+e+'="1"]').forEach((function(t){const n=t.getAttribute(o);null!==n?(t.style.position=n,t.removeAttribute(o)):t.style.position="",t.removeAttribute(e)})),s.remove()},document.body.appendChild(s),l.forEach((function(n){const r=document.createElement("div");r.className=t,r.style.cssText="position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg, rgba(0,255,0,0.15), rgba(0,255,0,0.15) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, rgba(0,255,0,0.15), rgba(0,255,0,0.15) 1px, transparent 1px, transparent 12px);pointer-events:none;z-index:2147483646;";"static"===window.getComputedStyle(n).position&&(n.setAttribute(o,n.style.position||""),n.style.position="relative",n.setAttribute(e,"1")),n.appendChild(r)}))}();
Drag me to bookmark bar: 👉🏻 CSS Grid Overlay

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.