---
title: "Advanced Layout Grid — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Kay Atoyebi · Interactive. Figma Layout Grid on Framer"
canonical: "https://framer.elliotli.dev/component/advancedlayoutgrid"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Advanced Layout Grid

# Advanced Layout Grid

Figma Layout Grid on Framer

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

![Advanced Layout Grid preview image 1](https://framer.elliotli.dev/og/component/advancedlayoutgrid/d708d73377ebb84f/1600x1200.jpg)

## Summary

Figma Layout Grid on Framer

## Description

**How to use (For New & Existing Designs):** This component works as a non-interactive overlay. You can add it to any new or existing design:

-   **Place it:** Drag the component inside your main Frame or Desktop breakpoint.
    
-   **Size it:** Set both Width and Height to Relative 100%.
    
-   **Position it:** Set layout position to Absolute Positioning.
    
-   **Layer Order:** Move the component to the very top of your layer stack so it sits over your content (Z-index).
    

**Note:** Since it is "click-through" (non-interactive), you can keep it visible while you work without it blocking your selection.

-   **📐 Dual Grid System:** Toggle both **Columns** and **Rows** independently.
    
-   **📊 Flexible Column Alignment:** Go beyond simple grids. Choose between:
    
    -   **Stretch:** Traditional, responsive columns that fill the space.
        
    -   **Left / Right / Center:** Set a fixed **Column Width** and align your entire grid block, just like in Figma or Sketch.
        
-   **↕️ Vertical Row Alignment:** Control your row grid position. Align rows to the **Top**, **Center**, or **Bottom** of your frame.
    
-   **🎛️ Full Customization:**
    
    -   Adjust column count, gutter, and margin/offset.
        
    -   Set row height, gutter, and vertical offset.
        
    -   Change the grid's **Color** and **Opacity** to match your design.
        
-   **✨ Smart Controls:** The property panel is clean and dynamic. Options like "Column Width" or "Row Offset" only appear when you need them.
    
-   **🖱️ Non-Interactive:** The grid overlays your design without blocking clicks, so you can work right through it.
    
    **Support:** [kayodetoyesupp@gmail.com](mailto:kayodetoyesupp@gmail.com)
    
    ![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-2k8m71gk-tSHNpEHA1vdilHmT0UQCh7jnDHbhvV)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-2k8m71gk-j5w8Cev7AWQt5jzycTm6JBkToCjFUU)

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

-   All · #7497

## Details

- **Author**: Kay Atoyebi
- **Price**: $6.00
- **Published**: 2025-11-12
- **Updated**: 2026-02-27
- **Added**: 2025-10-29
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase