How I Built a Visual CSS Grid Debugger in React

Ever struggled with debugging why your CSS grid isn't behaving as expected? I recently built a small React component that visualizes grid lines and gaps in real-time using a canvas overlay. It's been a lifesaver for understanding complex layouts. Here's the core logic:

javascript
function GridOverlay({ columns, rows, gap }) {
const canvasRef = useRef(null);

useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;

ctx.clearRect(0, 0, width, height);
ctx.strokeStyle = 'rgba(0, 150, 255, 0.3)';
ctx.lineWidth = 1;

// Draw vertical lines
const colWidth = (width - gap * (columns - 1)) / columns;
for (let i = 0; i <= columns; i++) {
  const x = i * (colWidth + gap);
  ctx.beginPath();
  ctx.moveTo(x, 0);
  ctx.lineTo(x, height);
  ctx.stroke();
}

// Draw horizontal lines
const rowHeight = (height - gap * (rows - 1)) / rows;
for (let i = 0; i <= rows; i++) {
  const y = i * (rowHeight + gap);
  ctx.beginPath();
  ctx.moveTo(0, y);
  ctx.lineTo(width, y);
  ctx.stroke();
}

}, [columns, rows, gap]);

return ;
}

For more complex debugging, I've been using a tool called CSSGridInspector that overlays this on any page. What's your favorite way to debug CSS grid layouts?