---
title: "Grid Overlay — Free Framer component · Best of Framer"
description: "Free Framer component · by Rishabh Joshi · Buttons. Component Overview A customizable 8-point grid overlay for Framer projects."
canonical: "https://framer.elliotli.dev/component/grid-overlay"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Grid Overlay

# Grid Overlay

[View on Framer](https://framer.com/marketplace/components/grid-overlay/?via=elliot-li)

![Grid Overlay preview image 1](https://framer.elliotli.dev/og/component/grid-overlay/26a823e0e607d4e9/1600x1200.jpg)

## Summary

Component Overview A customizable 8-point grid overlay for Framer projects.

## Description

**Component Overview**

A customizable 8-point grid overlay for Framer projects. It helps you maintain pixel-perfect spacing and visual consistency while building layouts. Inspired by Figma’s layout grid system, this component makes it easy to align and balance your designs directly inside Framer.

You can toggle, customize, and fine-tune the grid to match your project’s needs, whether you are working on a landing page, dashboard, or mobile layout.

**Key Features**

1.  **Quick Preset Grid Sizes**Instantly switch between common design system values: 4px, 8px, 12px, and 16px.
    
2.  **Grid Style Options**Choose between lines, dots, or crosses, similar to Figma’s grid styles.
    
3.  **Offset Controls**Fine-tune your grid’s position with horizontal and vertical offset settings for precise alignment within your frame.
    
4.  **Thickness Control**Adjust the stroke or dot thickness to suit your visual preference and zoom level.
    
5.  **Color Presets**Pick from a set of common grid colors or define your own for maximum flexibility.
    
6.  **Smart Defaults**Includes a darker, high-visibility default grid for immediate use in light-themed designs.
    

**Use Case**

Add this component to any frame to visualize spacing and maintain consistency across your project. Ideal for designers who prefer a pixel-accurate 8-point grid workflow directly inside Framer, without the need for external tools.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7436

## Details

- **Author**: Rishabh Joshi
- **Published**: 2025-10-18
- **Updated**: 2025-10-18
- **Added**: 2025-10-09
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow