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 intender 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="https://via.placeholder.com/450x300?text=Grid+Element" /></li>
    <li><img src="https://via.placeholder.com/450x300?text=Grid+Element" /></li>
    <li><img src="https://via.placeholder.com/450x300?text=Grid+Element" /></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 Fractal 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);
}

What about browsers that don’t support CSS Grid?

As of the time of writing this post, there is widespread support for CSS Grid, around 94% to be precise, so most browsers fully support it. However, we can improve the code we presented above for browsers that don’t support this fantastic feature.

To check whether a browser supports CSS Grid or not, we can use the supports@ feature that I’ve written about, which adds CSS only if the browser supports the specified feature. Something like the following could work:

.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;
    }
}

You’ll likely want to add a Media Query to play with the number of elements displayed in a narrower screen width by changing lines 7-8.

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. I have a lot more to learn about this topic too, and with each post I write, I learn more and more.

By the way, the inspiration for writing certain posts is taken from previous ones that have covered the same topic, but I don’t see that as a problem. I’m learning, you’re learning, and we’re all happy… Hopefully, you’ve learned something new 🙂