Advanced Layout Grid

Figma Layout Grid on Framer

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

Figma Layout Grid on Framer