Mastering CSS Grid: A Step-by-Step Guide to Grid Template Columns

CSS Grid has been a game changer for me, especially with the grid controls available in GenerateBlocks. I love how intuitive and flexible grid layouts can be. While CSS Grid can be simple to use, it also introduces some powerful features that might be unfamiliar, such as fractional units, repeat functions, minmax, and autofit or autofill.

If these terms sound confusing, don’t worry—this guide will break them down for you. We’ll start with the basics of the grid-template-columns property and gradually build up to more advanced techniques, including creating layouts that are automatically responsive without needing media queries.

Setting Up the Grid

To get started, I’ve set up a simple demo. It includes:

• A section with a wrapper to constrain the content to the website’s width.
• Three divs inside the wrapper, which will serve as our columns.

The first step is to change the wrapper’s display property to grid. Once that’s done, I’ll add a gap of 20 pixels between the columns to make the layout easier to visualize.

At this point, the layout hasn’t changed much. While the grid display allows us to add a gap, we still need to define the columns using the grid-template-columns property.

Level 1: Static Column Widths

The simplest way to define columns is by using static values. For example:

css

grid-template-columns: 100px 100px 100px;

This creates three columns, each 100 pixels wide. While this approach works, it’s not very flexible and isn’t commonly used.

Level 2: Fractional Units (FR)

A more common approach is to use fractional units (fr). Instead of specifying fixed widths, you can divide the available space into fractions. For example:

css

grid-template-columns: 1fr 1fr 1fr;

This creates three equal columns, each taking up one fraction of the available space.

You can also adjust the proportions. For instance, if you want the middle column to be twice as wide as the others, you can write:

css

grid-template-columns: 1fr 2fr 1fr;

This makes the middle column twice as wide as the left and right columns.

Mixing Units

You can mix fractional units with static values. For example:

css

grid-template-columns: 100px 2fr 1fr;

Here, the first column is 100 pixels wide, while the remaining space is divided into two parts for the middle column and one part for the right column.

Level 3: The Repeat Function

When working with many columns, typing out 1fr multiple times can get tedious. This is where the repeat() function comes in.

Instead of writing:

css

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

You can simplify it with:

css

grid-template-columns: repeat(10, 1fr);

This creates 10 equal columns, each 1 fraction of the available space.

You can also use the repeat() function to create patterns. For example:

css

grid-template-columns: repeat(5, 1fr 2fr);

This alternates between columns that are 1 fraction and 2 fractions wide, repeating the pattern five times.

Level 4: Adding Responsiveness with Minmax

One limitation of the previous examples is that the columns can break at smaller screen sizes. For instance, if the content inside a column is too wide, it can cause overflow issues.

To fix this, you can use the minmax() function. This allows you to set a minimum and maximum width for each column. For example:

css

grid-template-columns: repeat(3, minmax(0, 1fr));

Here’s what this does:

• The minimum width is set to 0, allowing the columns to shrink as much as needed.
• The maximum width is set to 1fr, dividing the available space equally.

This ensures the layout remains intact, even on smaller screens.

Level 5: Automatically Responsive Layouts with Autofit

To make your grid even more responsive, you can use the autofit keyword with the repeat() function. This allows the browser to automatically calculate how many columns can fit within the available space.

Here’s an example:

css

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

In this declaration:

• auto-fit tells the browser to fit as many columns as possible within the available space.
• minmax(300px, 1fr) ensures that each column is at least 300 pixels wide but can grow to fill the remaining space.

This setup is incredibly flexible. For example:

• On a wide screen, you might see three or four columns.
• On a smaller screen, the layout automatically adjusts to two columns.
• On mobile, it stacks into a single column.

Level 6: Preventing Overflow with the Min Function

While autofit works well in most cases, it can still cause overflow issues on very small screens. For example, if the minimum column width is set to 400 pixels, but the viewport is only 350 pixels wide, the layout will break.

To prevent this, you can use the min() function:

css

grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));

This ensures that the minimum column width is either 400 pixels or 100% of the viewport width—whichever is smaller. This prevents overflow on small devices while maintaining the desired layout on larger screens.

Why CSS Grid Is Worth Learning

CSS Grid can feel overwhelming at first, especially as the declarations get longer and more complex. However, the flexibility and power it provides—especially for creating responsive layouts—make it worth the effort.

If you’re just starting out, focus on the basics (Levels 1–3) and gradually work your way up to more advanced techniques like autofit and the min() function. Once you get the hang of it, you’ll find that CSS Grid can handle almost any layout challenge you throw at it.

Wrapping Up

CSS Grid is an incredibly powerful tool for web design, and the grid-template-columns property is at the heart of it. By mastering fractional units, the repeat() function, and responsive techniques like autofit and minmax(), you can create layouts that are both flexible and easy to maintain.

Take some time to experiment with these techniques in your own projects. The more you practice, the more intuitive it will become. And if you’re ready to dive deeper, exploring grid areas is a great next step!