Understanding Grid Template Columns and fr Units in GenerateBlocks

Overview

When building layouts with GenerateBlocks Pro, you will frequently use CSS Grid to arrange content into multiple columns.

One of the most important Grid settings is:

Grid Template Columns

You may see values such as:

1fr 1fr 1fr

or:

2fr 1fr

or:

1fr 1fr .75fr 1.5fr

These values determine the relative width of each Grid column.

The key concept to remember is:

fr means a fraction, or share, of the available Grid space.

Once you understand this, Grid Template Columns becomes much easier to configure.

1. What Is CSS Grid?

CSS Grid is a layout system used to arrange content into rows and columns.

For example, a three-column layout might look like this:

┌──────────────┬──────────────┬──────────────┐
│   Column 1   │   Column 2   │   Column 3   │
│              │              │              │
│   Content    │   Content    │   Content    │
└──────────────┴──────────────┴──────────────┘

In GenerateBlocks, the Grid Template Columns setting determines how much horizontal space each column receives.

2. What Does 1fr Mean?

fr stands for fractional unit.

You can think of 1fr as:

One share of the available space.

For example:

1fr 1fr 1fr

contains three equal shares:

1 + 1 + 1 = 3 shares

Therefore, the available Grid space is divided equally between the three columns.

┌────────────┬────────────┬────────────┐
│    1fr     │    1fr     │    1fr     │
│            │            │            │
│   33.3%    │   33.3%    │   33.3%    │
└────────────┴────────────┴────────────┘

In simple terms

1fr 1fr 1fr

means:

Three equal columns.

3. What Does 2fr Mean?

Consider:

1fr 2fr 1fr

There are four total shares:

1 + 2 + 1 = 4

The columns therefore receive:

• Column 1 → 1 share
• Column 2 → 2 shares
• Column 3 → 1 share

The middle column is twice as wide as either of the other columns.

┌──────────┬────────────────────┬──────────┐
│   1fr    │        2fr         │   1fr    │
└──────────┴────────────────────┴──────────┘

Approximate proportions:

25%        50%                  25%

4. What Does .75fr Mean?

Decimal values work in exactly the same way.

For example:

1fr 1fr .75fr

means:

• First column → 1 share
• Second column → 1 share
• Third column → 0.75 share

Total:

1 + 1 + 0.75 = 2.75 shares

Therefore, the third column is smaller than the first two.

Important

.75fr does not mean 75 pixels.

It also does not simply mean “75% width.”

It means:

0.75 of one flexible share relative to the other Grid tracks.

The same principle applies to:

.5fr

which means half a share, and:

1.5fr

which means one and a half shares.

5. Understanding 1fr 1fr .75fr 1.5fr

Consider this example:

1fr 1fr .75fr 1.5fr

There are four Grid tracks:

Column 1 = 1
Column 2 = 1
Column 3 = 0.75
Column 4 = 1.5

The total number of shares is:

1 + 1 + 0.75 + 1.5 = 4.25 shares

So the relative layout looks like:

┌────────┬────────┬──────┬────────────┐
│  1fr   │  1fr   │.75fr │    1.5fr   │
│        │        │      │            │
└────────┴────────┴──────┴────────────┘

The fourth column is the largest.

The third column is the smallest.

The first and second columns are equal.

6. The Easiest Way to Calculate fr Values

Whenever you see a Grid such as:

2fr 1fr 1fr

simply add the numbers:

2 + 1 + 1 = 4

There are four total shares.

Therefore:

Column 1 = 2 shares
Column 2 = 1 share
Column 3 = 1 share

The approximate proportions are:

50% | 25% | 25%

This simple method works for most common fr layouts.

7. Common Grid Examples

Three Equal Columns

1fr 1fr 1fr

Result:

33.3% | 33.3% | 33.3%

Use this when all three columns should have equal relative width.

Two Equal Columns

1fr 1fr

Result:

50% | 50%

Useful for layouts such as:

• Text + Image
• Two content areas
• Two cards
• Two feature groups

Larger Left Column

2fr 1fr

Result:

67% | 33%

The first column receives twice as much flexible space as the second.

Larger Right Column

1fr 2fr

Result:

33% | 67%

The second column receives twice as much flexible space as the first.

Three Columns With a Smaller Third Column

1fr 1fr .75fr

The third column is relatively narrower than the first two.

This can be useful when the third area contains less content.

Four Equal Columns

1fr 1fr 1fr 1fr

Result:

25% | 25% | 25% | 25%

8. repeat() Notation

You may also encounter:

repeat(3, 1fr)

This is simply a shorter way of writing:

1fr 1fr 1fr

Similarly:

repeat(2, 1fr)

means:

1fr 1fr

Using repeat() can make longer Grid definitions easier to read.

9. Understanding minmax(0, 1fr)

GenerateBlocks may also produce a value such as:

repeat(2, minmax(0, 1fr))

This may look complicated, but the basic idea is simple.

repeat(2, ...)

means:

Create two columns.

And:

minmax(0, 1fr)

means:

Allow the column to range from a minimum of 0 up to one flexible share.

Therefore:

repeat(2, minmax(0, 1fr))

creates two flexible columns while explicitly allowing their minimum size to be zero.

This is commonly useful in responsive Grid layouts.

10. fr Is Relative, Not a Fixed Pixel Size

This is one of the most important concepts.

Consider:

1fr 1fr

It does not mean:

500px 500px

The actual size depends on the available container width.

For example, if the container becomes wider, both columns become wider.

If the container becomes narrower, both columns become narrower.

The relationship between the columns remains equal.

Therefore:

fr creates flexible proportions rather than fixed dimensions.

11. Grid Gap Is Different From fr

Two settings are often confused:

Grid Template Columns

Controls:

The relative width of the columns.

Example:

1fr 2fr 1fr

Column Gap

Controls:

The space between the columns.

For example:

1fr 1fr 1fr

with a larger column gap gives:

┌──────────┐    ┌──────────┐    ┌──────────┐
│ Column 1 │    │ Column 2 │    │ Column 3 │
└──────────┘    └──────────┘    └──────────┘

The fr values determine the column proportions.

The gap determines the separation between them.

Therefore, if a layout looks too crowded, do not automatically change the fr values. The problem may simply be the Column Gap.

12. Grid and Flexbox Are Different

GenerateBlocks uses both Grid and Flexbox, and understanding the difference is important.

Grid

Grid is particularly useful when arranging content into multiple columns and rows.

Example:

1fr 1fr 1fr

creates three columns.

Flexbox

Flexbox is useful for arranging items within a container.

For example:

Flex Direction: Row

places items horizontally:

Item 1    Item 2    Item 3

While:

Flex Direction: Column

places them vertically:

Item 1
Item 2
Item 3

Simple rule

Use Grid to control the major column structure. Use Flexbox to control the arrangement of items inside a container.

13. Responsive Grid Layouts

GenerateBlocks allows different Grid settings at different breakpoints.

For example:

Desktop

1fr 1fr 1fr

Three columns:

┌──────────┬──────────┬──────────┐
│ Column 1 │ Column 2 │ Column 3 │
└──────────┴──────────┴──────────┘

Tablet

repeat(2, minmax(0, 1fr))

Two columns:

┌──────────┬──────────┐
│ Column 1 │ Column 2 │
├──────────┼──────────┤
│ Column 3 │          │
└──────────┴──────────┘

Mobile

1fr

One column:

┌──────────┐
│ Column 1 │
├──────────┤
│ Column 2 │
├──────────┤
│ Column 3 │
└──────────┘

This is one of the main reasons CSS Grid is useful for responsive website layouts.

14. Always Check the Grid Children First

Before changing Grid Template Columns, look at the List View in the WordPress Block Editor.

For example:

Grid
├── Container
├── Container
├── Container

There are three child Containers.

A natural three-column layout would therefore be:

1fr 1fr 1fr

If the structure is:

Grid
├── Container
├── Container
├── Container
└── Container

there are four child Containers.

You should first determine what each Container is being used for before changing the Grid Template Columns.

Important rule

Do not change Grid Template Columns based only on how the page looks. Check the List View and understand the Grid’s child structure first.

This prevents unexpected layout changes.

15. Do Not Confuse Columns With Content

The number of visible content areas does not always tell you the complete Grid structure.

A Grid can contain:

• Empty Containers
• Spacer elements
• Hidden elements
• Responsive-only elements
• Content containers
• Nested Containers

Therefore, always inspect the List View before modifying a Grid.

16. How to Choose the Correct Grid Value

When creating or editing a Grid, ask these three questions.

Question 1 — How many columns do I need?

For example:

3 columns

A good starting point is:

1fr 1fr 1fr

Question 2 — Should the columns be equal?

If yes:

1fr 1fr 1fr

If no, use different fractions.

For example:

2fr 1fr 1fr

Question 3 — Does the layout need to change on smaller screens?

If yes, define responsive Grid settings.

For example:

Desktop:
1fr 1fr 1fr

Tablet:
1fr 1fr

Mobile:
1fr

17. Quick Reference

18. The One Rule to Remember

If you remember only one thing, remember this:

fr means “share.”

For example:

1fr 1fr 1fr

means:

1 share + 1 share + 1 share = three equal columns.

And:

2fr 1fr 1fr

means:

2 shares + 1 share + 1 share = the first column is twice as wide.

And:

1fr 1fr .75fr 1.5fr

means:

1 share + 1 share + 0.75 share + 1.5 shares.

Once you think in shares rather than pixels, Grid Template Columns becomes much easier to understand.

19. Practical GenerateBlocks Workflow

When working with a GenerateBlocks Grid:

1. Open List View.
2. Select the Grid container.
3. Count the child Containers.
4. Decide how many columns are actually required.
5. Choose equal or unequal proportions.
6. Set Grid Template Columns.
7. Set Column Gap separately.
8. Check the result at desktop width.
9. Configure Tablet and Mobile separately when required.
10. Do not change unrelated containers or navigation settings to solve a Grid problem.

This approach makes Grid troubleshooting much more predictable.

Summary

The most useful values to remember are:

1fr 1fr

Two equal columns

1fr 1fr 1fr

Three equal columns

2fr 1fr

First column twice as wide

1fr 2fr

Second column twice as wide

1fr 1fr .75fr

Third column relatively narrower

And:

1fr 1fr .75fr 1.5fr

means four columns with relative proportions of:

1 : 1 : 0.75 : 1.5

The key is not to memorize every possible combination. Understand the share system, inspect the Grid structure, and then choose the proportions you need.