---
title: "GridPRO — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Mat Ford · Backgrounds. Why GridPRO Exists Most layout systems stop at columns."
canonical: "https://framer.elliotli.dev/component/gridpro"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/GridPRO

# GridPRO

A precision grid system for designers

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

![GridPRO preview image 1](https://framer.elliotli.dev/og/component/gridpro/e4dfd127e56eef26/1600x1200.jpg)

## Summary

Why GridPRO Exists Most layout systems stop at columns.

## Description

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ksdwe9xu-iakKAyQIJsn3PQJgtW3SP9ZaPorcDh)

## Why GridPRO Exists

Most layout systems stop at columns.

They don’t help you:

-   Establish vertical rhythm
    
-   Control baseline and spacing intervals
    
-   Design typographic tempo
    
-   Use the grid as a visible, intentional design element
    

GridPRO is built around the idea that **structure is part of the design**, not just a hidden scaffold.

## Key Features

### Columns and Rows

Define full structural grids — not just columns. Create consistent horizontal and vertical systems that scale across layouts and breakpoints.

### Beats & Rhythm Control

Set visual “beats” within your layout to define rhythm, spacing intervals, baseline alignment, and emphasis rows. Perfect for editorial layouts, typographic systems, and complex interfaces.

### Decorative or Invisible — Your Choice

Use the grid as a working overlay, a subtle background element, or a bold graphic feature. Toggle it on or off instantly.

### Fully Responsive

Customise grid structure, spacing, and beats independently at every breakpoint — desktop, tablet, and mobile.

### Built for Designers

Designed to feel more like a **Swiss design tool** than a technical overlay. Everything is adjustable, intentional, and visual.

## Responsive by Default

GRIDPRO is fully breakpoint-aware.

You can:

-   Change column count per breakpoint
    
-   Adjust margins and gutters
    
-   Modify row density and rhythm
    
-   Toggle visibility per device
    

No hacks. No duplicated components.

## Beats & Visual Rhythm

Beats are where GRIDPRO goes beyond traditional grids.

Use them to define:

-   Primary layout rhythm
    
-   Secondary spacing intervals
    
-   Baseline alignment
    
-   Accent or emphasis rows
    
-   Structured variation and breaks
    

This makes GRIDPRO especially powerful for:

-   Editorial layouts
    
-   Typography-led designs
    
-   Design systems
    
-   Complex marketing pages
    

With GridPRO active:

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ksdwe9xu-T13seJvmab4AzVMKusvbzNpko1CrLb)

With GridPRO hidden.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ksdwe9xu-6dzyLAk5L7sWPG4jYRatBwl3FzkcEr)

## Decorative Grids & Gradients

GridPRO doesn’t have to disappear.

You can style the grid itself:

-   Line colour and opacity
    
-   Stroke weight
    
-   Solid or gradient lines
    
-   Decorative emphasis rows
    

This lets the grid become part of the visual language — not just a hidden utility.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ksdwe9xu-pwocKuK2ZfmMxW8Yw8m5fHDrw2fr1e)

## Properties

### Display Control

Quick Mode

-   Choose whether the grid appears only in the Designer or on the live site
    

Quick Show on Load

-   Set whether the grid is visible or hidden by default
    

Hotkey Toggle

-   Set whether the grid is visible or hidden by default

Columns & Grids
Columns
    

Columns

-   Set column count, gutters and margins
    

Rows

-   Set row height, vertical spacing and repetition
    

### Beats & Rhythm

Beat Count

-   Define multiple rhythmic layers
    

Beat Weight

-   Control visual emphasis
    

Beat Colour

-   Assign individual colours or gradients
    

### Styling

Grid Colour

-   Solid or gradient
    

Stroke Weight

-   Fine-tune visual density
    

Opacity

-   Subtle or bold, depending on context
    

### Toggle Button

Show / Hide Button

-   Enable or disable the on-canvas toggle
    
-   Full control over position, style, and label
    

Responsive Controls

-   Independent settings per breakpoint
    
-   Show or hide grid per device
    
-   Custom layouts for desktop, tablet, and mobile
    

## Use Cases

-   Design system foundations
    
-   Editorial and typography-heavy layouts
    
-   Marketing pages with strong rhythm
    
-   Visual identity exploration
    
-   Teaching layout and alignment principles
    
-   Decorative Swiss-style compositions
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ksdwe9xu-gOtzeVRW43TIoasbkNtpfGVHmwXjib)

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

-   All · #5933

## Details

- **Author**: Mat Ford
- **Price**: $6.00
- **Published**: 2026-02-20
- **Updated**: 2026-02-21
- **Added**: 2026-02-03
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background