5 Common Grid Layouts with GenerateBlocks (+ Save them as Local Patterns for Faster Building!)

When it comes to web design, you might look at a hundred different sites and they all look unique. But take a closer look, and you’ll realize most of them use the same common layouts: two columns, three columns, 50/50 splits, etc.

Instead of rebuilding these from scratch every time, I’ve started using grid layouts with GenerateBlocks and saving them as local patterns. This lets me create new pages much faster.

In this post, I’ll walk you through five useful grid layout setups, how to build them in GenerateBlocks, and how to save them for reuse.

Layout 1: 50/50 Two Column Grid

Steps to Create:

1. Insert a Grid block in GenerateBlocks.
2. In the Layout settings, choose the two-column preset.
3. Insert a Container block into each column.
4. Add spacing:
   • Column gap: 2rem
   • Row gap: 2rem (for mobile stacking)
5. Switch to mobile view and set grid to 1 column (1fr).
6. Set max width using your global max width variable.
7. Set left and right margin to auto to center the grid.

Save as Local Pattern:

• Click the three dots menu on your Grid block, and select “Save as Local Pattern”
• Name it something like Grid - Two Column.
• Leave Synced unchecked (for isolated use).

Layout 2: Three Column Grid

Steps to Create:

1. Insert a new Grid block.
2. Choose the three-column layout preset.
3. Add 3 container blocks inside.
4. Set column and row gap to 2rem.
5. On mobile, set Grid Columns to 1fr.
6. Apply global max width and auto margin settings.

Save Pattern:

• Click the three dots menu on your Grid block, and select “Save as Local Pattern”
• Name it Grid - Three Column.
• Uncheck Synced.

Layout 3: Four Column Grid

Steps to Create:

1. Insert a Grid block and choose the four-column layout preset.
2. Set spacing:
   • Column gap: 2rem
   • Row gap: 2rem
3. On mobile, set the Grid Columns to 1fr.
4. Apply global max width and auto margin.

Save Pattern:

• Click the three dots menu on your Grid block, and select “Save as Local Pattern”
• Name it Grid - Four Column.
• Uncheck Synced.

Layout 4: 25/75 Split (1/4 and 3/4)

This layout is perfect when you want a smaller left column for a heading or nav and a wider right column for body content.

Steps to Create:

1. Use the 1fr / 3fr preset.
2. Add two containers.
3. Apply spacing (2rem gap), global width, and auto margin.
4. On mobile, set Grid Columns to 1fr.

Save Pattern:

• Click the three dots menu on your Grid block, and select “Save as Local Pattern”
• Name it Grid - 25/75.
• Uncheck Synced.

Layout 5: 33/67 Split (1/3 and 2/3)

Use this layout for a visual/text balance with a 33% width column on the left and 67% on the right.

Steps to Create:

1. Choose the 1fr / 2fr preset.
2. Add two containers.
3. Add spacing, global width, and margin.
4. On mobile, set Grid Columns to 1fr.

Save Pattern:

• Click the three dots menu on your Grid block, and select “Save as Local Pattern”
• Name it Grid - 33/67.
• Uncheck Synced.

Using Your Saved Patterns

To use your new grid layouts:

1. Insert a container block.
2. Use the slash command (/) or block inserter to search your saved pattern name (e.g., Grid - Two Column).
3. Drop it in and start designing—your spacing, responsiveness, and layout are already set.

Bonus: Add Container Padding with Global Styles

To finish off your layouts, apply padding by selecting one of your global styles (like Medium Container). This adds responsive spacing using clamp() and makes sure your sections don’t feel cramped.

Final Thoughts

These five grid setups are the core layouts I use regularly. Saving them as local patterns is one of the best ways to speed up your workflow and maintain consistency across pages.

Just remember: the hardest part is remembering what you named them—so keep it simple and searchable.