Creating Responsive Layouts with CSS Grid Without Media Queries

Adopting the Flexibility of CSS Grid provides us with the ability to create resilient and robust websites (Frontend Wise), where instead of using specific and fixed sizes, we stretch elements within certain boundaries and allow them to fill the remaining empty space.

So not only did CSS Grid change the way we think and build layouts, but it also eliminates the need for relying on specific code for certain resolutions and can even eliminate the need to use Media Queries (for creating responsive grids only, of course).

Like many others, I also embrace this idea and use it as much as possible to create CSS Grid-based layouts without Media Queries, as demonstrated in the following example (this is a live example):

The example is intended for desktop and not for mobile devices. You’re welcome to resize the browser width and see for yourself…

This is a responsive grid without any media queries and it works in every viewport thanks to CSS Grid. Cool, isn’t it?

How does it work?

As you probably know, CSS Grid is excellent for creating two-dimensional layouts, but typically for a one-dimensional layout like the one above, we use Flexbox. The reason we use CSS Grid in this case is the minmax function.

This function allows us to create a responsive and robust grid without using Media Queries for different resolutions. Take a look at the CSS for the example above:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  grid-gap: 15px;
}

And this is the HTML for the same example:

<ul class="container">
    <li><img src="image.jpg" /></li>
    <li><img src="image.jpg" /></li>
    <li><img src="image.jpg" /></li>
</ul>

It’s amazing what can be achieved today with a few lines of CSS, as you must agree…

The CSS above arranges the elements in a grid with a minimum width of 192px and fills the remaining space using Fractional Units (abbreviated as 1fr) for the maximum width. The remaining space is divided equally among the elements within the container.

When the element’s width reaches 192px, it won’t shrink beyond that; instead, the row will break, and the element will stretch to the maximum width available (considering 1fr).

You’re probably wondering what the keyword auto-fill we used means. Let’s try to explain its role and meaning briefly…

Using the auto-fill Keyword

When we create a grid within an element, we can use the CSS repeat() function to generate a specific repetition of the element’s definition in the grid. For example, the following code will create a grid with 10 elements, each with a width of 100px:

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

Of course, we can also create 10 flexible elements with the same width using fr units:

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

But this code won’t allow us to create as many elements with a specific width as we want that fit within a viewport or container. In other words, we’ll always get 10 elements with the code shown above.

It would be nice if we could create a grid where we want to fit as many elements with a fixed width as possible into such a container, and that’s exactly what auto-fill allows us to do.

To create a grid with as many elements as possible, each with a width of 100px, within a specific container, we can use auto-fill instead of a specific number, as shown in the following example:

.container {
   grid-template-columns: repeat(auto-fill, 100px);
}

Browser Support

CSS Grid has been supported by all major browsers since 2017, and as of today it has roughly 97-98% global support. You can safely use CSS Grid in production without any fallbacks.

That said, if you ever need to check whether a browser supports a specific CSS feature, you can use the @supports feature query. Here’s an example that provides a Flexbox fallback for the rare case where CSS Grid is not available:

.container > ul {
    display: flex;
    flex-wrap: wrap;
}

.container > ul > li {
    width: calc( 94% / 3 );
    margin: 1%;
}

@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
        grid-gap: 1rem;
    }

    .container > ul > li {
        width: unset;
        margin: unset;

    }

    .container > ul {
        flex-wrap: unset;
    }
}

In practice, this kind of fallback is rarely needed today. But the pattern is still useful to know for newer CSS features that don’t yet have full support.

FAQs

Common questions about responsive CSS Grid layouts:

In Conclusion

In conclusion of this short post, the possibilities that CSS Grid provides are becoming more apparent. I’m sure you’re encountering more and more websites that use CSS Grid, and as Frontend developers, you really need to learn about it.

Hopefully, you’ve learned something new. If you want to dive deeper, check out the full guide to the fr unit which is at the core of how these flexible grids work.