How To Add Rows & Columns in Framer

In this Framer tutorial, we show you how to add rows and columns to your site.

Why are rows & columns important?

Web design and grid structures go hand-in-hand, so if you are working online there’s no doubt that you’ll be working with rows and columns on a daily basis. This is a quick guide on how rows and columns work to your Framer site, so you can get on top of the basics.

Quick steps

1. Navigate to a section of your design
2. Select “Layout” in the top left corner
3. Select “Rows” or “Columns”
4. Click and drag in a section to create a stack
5. To add more rows or columns:
   – Copy and paste (Control-V or Command-V)
   – Hold in ‘Alt’ or ‘Option’ on your keyboard and click and drag to duplicate
6. Select the stack and use the side panel to adjust settings such as gap and padding

Note: You can use the “Direction” function in the side panel to switch between columns and rows.