Every time when I create a card grid, I find myself searching for how to make the responsive card grid layout in a way I wanted. I’ve decided to write a blog on this topic, so I can have a direct reference for future projects.

In this article, we will learn how to make the responsive card grid layout and also explore the details of grid-template-columns, repeat(), minmax() and examine the differences between auto-fill and auto-fit.

For the demonstration, I created the card grid in CodePen here.

To make the responsive card grid layout, we basically need to know one line of CSS code. Let’s take a look at the code first.

Code

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

That’s it. This one line of code align with display: grid will create your card grid responsive without setting any breakpoints with media query.

Besides the CodePen example, another great example is here at Frontendly.io Blog page as you can see from the screen recording below:

Now let’s deep dive into the code and understand how it creates the responsive card layout.

Grid and DevTools

To use grid-template-columns, the initial step is to make the container as a grid. This is achieved by setting the display property to grid. Below is how we can configure the container to embrace a grid layout:

display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

With these properties applied, the container now adopts a grid layout.

Now when we navigate to DevTools, look for the container element and you will see that it will be marked as grid to indicate its grid status. By clicking on this marker, DevTools will overlay a grid guideline on the page.

This visual aid is great for understanding and adjusting the grid layout directly within the browser.

Next let’s jump into more details of grid-template-columns.

grid-template-columns

The grid-template-columns property defines the line names and track sizing functions of grid columns. It accepts a list of values that specify the size of each column in the grid. These values can be fixed lengths, percentages, or flexible units like fr that distribute available space.

Let’s take a look at some examples of grid-template-columns usages.

Fixed Width Columns

We can specify columns with fixed widths by simply using length units like pixels.

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

And here is the outcome. The light purple indicates the grid container and the dark purples are the grid items.

This defines a grid with three columns, where the first column is 100 pixels wide, the second is 200 pixels wide, and the third is 300 pixels wide.

As you may have noticed, the third grid item gets outside the grid container because the width of the grid items are set with the pixel values. In order to place the grid items inside grid container, we need to use the flexible unit.

Flexible Columns with `fr` Unit

The fr unit allows you to distribute available space in the container among columns.

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

And the outcome is here:

In this setup, the grid has three columns. The middle column is twice as wide as the first one and the last column is three times bigger than the first column. And using fr unit places grid items within the grid container by distributing the container’s width proportionally.

Combining Fixed and Flexible Sizes

We can mix fixed and flexible sizes for more complex layouts.

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

Let’s see the outcome.

This creates a three-column layout with a fixed width for the first column and the remaining space distributed between the second and third columns, with the third column being twice as wide as the second.

Using Percentages

Percentages allow columns to adjust based on the grid container’s width.

grid-template-columns: 25% 50% 25%;

This divides the grid into three columns, where the middle column takes half of the grid’s width, and the two side columns each take a quarter.

Now you might be thinking if 25% 50% 25% works the same as 1fr 2fr 1fr. Let’s compare and see the differences.

`1fr 2fr 1fr` vs `25% 50% 25%`

The two declarations for grid-template-columns: 1fr 2fr 1fr and 25% 50% 25% achieve similar layouts in that they both create three columns with the middle column being twice as wide as the side columns. However, there are fundamental differences in how these sizes are calculated and how they behave under different circumstances especially with the gap property.

1fr 2fr 1fr

As we show in the above section, the fr unit allocates a portion of the available space in the grid container. 1fr 2fr 1fr means the available space is divided into four equal parts (1+2+1=4 parts in total).

The first and third columns each take up one part, while the middle column takes up two parts. This ensures that the middle column is always twice as wide as each of the side columns, regardless of the container’s size.

This setup is more flexible in environments where the container’s size might change because it adapts to the available space rather than being fixed to a specific percentage of the parent container.

This is also more ideal for responsive design, as it allows the columns to grow or shrink fluidly as the viewport or container size changes.

Additionally, when we add spacing between grid items using the gap property in the grid container, the fr units still consider this spacing while distributing grid items within the confines of the grid container.

25% 50% 25%

Using percentages directly ties each column’s width to a specific percentage of the grid container’s width. The first and last columns are each set to 25% of the container’s width, and the middle column is set to 50%.

This approach is straightforward and ensures that the columns maintain the specified percentage widths relative to the container, making it predictable.

While it adjusts to the container size, the distribution is rigidly based on the container’s current width percentage, which might not always offer the same level of flexibility in all design contexts compared to using fr units.

Especially, with the gap property applied to the grid container, we will see an unexpected outcome. Let’s see an example without the gap.

Now, upon applying the gap property, the third grid item, assigned a percentage width, exceeds the bounds of the grid container. This occurs because the gap’s value is compounded with the percentage width of each item. Consequently, the combined width of the three items will be:

25% + 16px + 50% + 16px + 25% = 100% + 32px (with 16px representing the value of the gap). Let’s see this issue here:

Now, using the fr unit allows for adding gap values without causing the grid items to extend beyond the grid container, as shown below. This occurs because the fr unit allocates space for each grid item based on the available space in the container after accounting for fixed sizes and gaps, ensuring that the total layout respects the boundaries of the grid container.

Great! Now we understand how grid-template-columns works. Let’s now dive into repeat() CSS function.

repeat()

The repeat() allows developers to define a pattern of rows or columns that should be repeated multiple times, reducing the need to write repetitive code.

The basic syntax of the repeat() function is as follows:

repeat(number_of_repetitions, track_size)

number_of_repetitions: An integer that defines how many times the track size or pattern should be repeated.
track_size: The size of the track (row or column). This can be a fixed size, a flexible fraction (fr), or a combination of different sizes.

Let’s see some examples.

Defining Multiple Columns of the Same Size

To create a grid with five columns of equal width, we can use the repeat() function instead of specifying each column size individually:

.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

Here is the outcome.

Combining Fixed and Flexible Sizes

We can mix fixed and flexible sizes within the repeat() function to create more complex layouts.

.grid-container {
  display: grid;
  grid-template-columns: 100px repeat(2, 2fr) 100px;
}

In this example, it creates a grid with four columns. The first and last columns are fixed at 100px wide each. The two middle columns are set to 2fr each. This means that after allocating the fixed space for the 100px columns, the remaining space in the grid container is divided into 4 equal parts (because 2fr + 2fr = 4fr), with each of the middle columns taking 2 parts. The actual numeric value of fr (whether 1, 2, or any other number) in a single grid layout matters only in relation to other fr values within the same declaration.

This results in both middle columns being equally wide and each being twice as wide as a column that would be defined with 1fr in this specific layout.

Responsive card layout

The repeat() function is particularly useful in responsive design, where the number of grid tracks (columns or rows) needs to adjust based on the viewport size. By combining repeat() with auto-fill or auto-fit, and the minmax() function, developers can create flexible layouts that adapt seamlessly across different screen sizes.

To further explore that, let’s first understand how the minmax() function works.

minmax()

The minmax() CSS function is a powerful feature of CSS Grid that allows us to specify a minimum and maximum size for grid tracks (columns or rows). This function plays an important role in creating responsive layouts, as it ensures that grid elements can adapt to various content sizes and viewport dimensions while maintaining a cohesive and user-friendly design.

The basic syntax of the minmax() function is:

minmax(min_size, max_size)

min_size: The minimum size that the track can be. This value ensures that the track does not shrink below a certain size, which can be specified in various units like pixels (px), ems, percentages (%), or the flexible fr unit.
max_size: The maximum size that the track can be. This value caps the track’s size to prevent it from growing beyond a specified limit. Similar to min_size, this can be defined using different units.

Now finally with auto-fill or auto-fit, we can create the responsive card grid layout. Let’s take a look at those two values and see how it creates the responsive layout.

auto-fill vs auto-fit

The auto-fill and auto-fit are keywords used within the repeat() function to control the behaviour of grid tracks, especially in responsive layouts. Although they seem similar at first glance and are often used in conjunction with the minmax() function, auto-fill and auto-fit serve different purposes and produce different results under certain conditions. Understanding the differences between these two can significantly impact the design and functionality of grid-based layouts.

auto-fill

The auto-fill keyword tells the browser to create as many tracks as can fit into the container’s current size, using the size defined in minmax(). If the container’s size exceeds the total size of all tracks, auto-fill leaves empty space in the grid, which might result in empty columns or rows that are not visually filled with content but still occupy space in the layout.

auto-fit

The auto-fit works similarly to auto-fill in creating as many tracks as can fit into the container. However, the key difference is in how it handles extra space. auto-fit collapses the unused tracks, which means it effectively removes empty tracks and spreads the remaining ones to fit the container if there’s additional space available. This can be particularly useful for layouts where you want all available space to be used without leaving empty columns or gaps.

Let’s take a look at the example.

And here is the recording showing the different behaviour between auto-fill and auto-fit.

As we can observe from the above recording, when the grid items occupy the space of the grid container in the right amount, both auto-fill and auto-fit looks the same. However, when there is extra space available in the container, they behave differently. auto-fill will leave the empty space and won’t fill up the space whereas auto-fit will take up the extra space in the container.

Now with all together, let’s revisit the code and see if we understand it now.

Code Explanation

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

The CSS grid-template-columns property, along with the repeat(), auto-fill, and minmax() functions, provide responsive and adaptable grid layouts.

Let’s review each element.

grid-template-columns: Defines the size, number, and distribution of columns in a grid, setting the groundwork for complex grid layouts.
repeat(): Simplifies grid definition by repeating columns (or rows) according to a specified pattern, enhancing efficiency and readability when multiple similar tracks are needed.
auto-fill within repeat(): Automatically inserts as many columns as the container can accommodate, based on defined size limits, optimising space usage even if it results in empty columns.
minmax(200px, 1fr): Specifies minimum (200px) and maximum (1fr) sizes for columns, ensuring no column is narrower than 200px while allowing flexible expansion to distribute available space equally among columns. This ensures grids adapt fluidly across different screen sizes, maintaining content integrity and layout consistency.

Together, these properties and functions enable the creation of dynamic, fluid layouts that respond to varying screen sizes and content requirements, providing a seamless user experience.

This setup helps create responsive galleries, card layouts, or any grid where the content must reflow based on the viewport size. It ensures that the grid utilises all available space efficiently, while keeping the content accessible and visually appealing.

I hope you found this article helpful as a guide to creating your responsive card grid layout. If you’re keen on discovering more CSS tricks and tips, please subscribe to our newsletter below. Also let’s stay connected on LinkedIn, and let’s keep the conversation going. 😊