Back to Blog
Published byCaleb Pierce
Published

Introducing: vite-plugin-grid-overlay

I'm excited to introduce vite-plugin-grid-overlay, a lightweight Vite plugin that lets you quickly generate and toggle a fully customizable and non-interfering grid overlay directly in your development environment. It’s designed to help frontend engineers and designers visualize layout structure, spacing, and alignment in real time without needing to reach for browser extensions or clutter your codebase with temporary grid hacks.

Why This Plugin?

Modern UI design often relies on invisible grid systems that guide spacing and alignment, but once development starts, it’s easy to lose sight of those underlying guides. Designers may work in tools like Figma with clear layout constraints, but those don’t always translate 1:1 into the browser. That’s where this plugin shines.

With vite-plugin-grid-overlay, you can:

  • Instantly enable a configurable grid overlay in the browser
  • Change grid settings to match your design's column count, column width, and total width.
  • Toggle visibility with a simple keyboard shortcut (Alt + g)
  • Keep your markup and styles clean — no need for dev-only grid markup

Features

  • ✅ Fully configurable columns, gutters, and max-width
  • 🎨 Custom color and z-index settings
  • 🎯 Works in all your pages automatically
  • 💡 No runtime dependencies — pure dev experience

Getting Started

Install the plugin:

pnpm install -D vite-plugin-grid-overlay

# …or with npm
npm install -D vite-plugin-grid-overlay

Then add it to your vite.config.ts:

import { defineConfig } from 'vite'
import gridOverlay from 'vite-plugin-grid-overlay'

export default defineConfig({
  plugins: [
    gridOverlay({
      gridColor: 'rgba(255,0,0,0.2)',
      columns: 12,
      columnWidth: 80,
      totalWidth: 1280,
      zIndex: 9999,
    }),
  ],
})

Now run your Vite dev server — you’ll see a grid overlaid across your site. Use Alt + g to toggle it on and off.

Ideal Use Cases

  • Verifying layout consistency across breakpoints
  • Ensuring correct alignment of UI components with design specs
  • Debugging spacing issues in complex layouts
  • Giving designers peace of mind when reviewing in-browser implementations

Try It Out

You can check out the plugin and contribute at the GitHub repository.

Happy coding! 🚀

Back to Blog