Advanced Layout Grid

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.