Advanced Layout Grid
Bring a Figma-like, fully customizable grid system directly into your Framer projects. This component has a non-interactive overlay (with both columns and rows).
Make it with Workshop
Build your own component with AI
About this Component
📐 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.How to use: The component has to have a relative 100% height and width.
