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.
Kay Atoyebi
