Grids in Framer let you arrange content in equal columns and rows — perfect for portfolio sections, feature cards, team members, and any repeating content. Your template likely uses grids in multiple places.

The Difference Between a Stack and a Grid

A Stack arranges items in a single row or column. A Grid arranges items in multiple rows AND columns simultaneously. Use a grid when you want things like "3 cards per row, wrapping to the next row".

Finding Grid Elements in Your Template

1. Click on a card or repeating section of your template.

2. Click the parent frame (one level up in the layers).

3. If the right panel shows "Grid" under Layout, you've found a grid.

Adjusting the Grid

1. Select the grid frame on the canvas.

2. In the right panel under Layout → Grid, you'll see Columns and Rows settings.

3. Change the number of columns to control how many items appear per row. For example, change 3 to 2 for a two-column grid.

4. Adjust the Column Gap and Row Gap to control spacing between cards.

💡 Tip: To make a grid responsive, set the column widths to "1fr" (fractional units) rather than fixed pixel values. This way, the columns share the available space equally and scale naturally on different screen sizes.

Adding a New Card to a Grid

1. Select an existing card inside the grid.

2. Press Cmd/Ctrl + D to duplicate it.

3. The new card automatically joins the grid. Edit its content as needed.