How to use Grids

Grids are like tables or Excel sheets for layout. They allow you to display elements with a fixed number of rows and columns.

The easiest way to create a grid is from the Layout tool in the top bar. Alternatively, you can convert any Frame into a Grid under the Layout property in the right hand property panel.

After creation you can set the column and row count. Because the cells are separate from the layout you'll have to add them by clicking the plus button as many as you need.

The reason the cells are decouples is because the Grid needs to be able to be used for say a dynamic gallery where the number of photos might not exactly match cells x columns or if you want one cell to wrap multiple rows or columns.

Responsive

Grids are excellent to make responsive layouts. If you add a mobile breakpoint, it will by default switch to a single column and you can adjust the layout to look good.

Advanced

There are many advanced options to discover under "Advanced". You can visually explore them or read a bit about CSS Grid which is the underlying technology that powers Grids.

Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI
Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI
Supercharge your business site.
  • 99.99% uptime

  • Dedicated IP address

  • Unlimited pages

  • Proxy support

  • Custom onboarding

  • Unlimited viewers

  • Invoicing

  • Custom terms

  • Security reports

  • Single sign-on

  • Canonical URL

  • User roles

  • Office hours

  • Performance audit

  • SEO audit

  • Advanced DDoS protection

  • Custom agreements

Framer UI