Reasons Why CSS Grids Are Ideal for Enhancing Responsiveness

When asked about their favorite layout system, front-end devs often discards "CSS grids" and consider it as non-effective since it achieves the same goals of other systems with many more code lines. Especially if responsiveness is required. I've been using css grids for a long time (it's my favorite) and I learned about a case where it's better to opt for css grids rather than other layout systems.

It's the case when a container holds a collection of boxes (e.g articles or videos preview links) and we want it to be responsive regardless of the number of boxes or their size

Why we should use "CSS grids"?

Unlike other layout systems, css grid is a 2D layout system that enables easy positioning of elements relatively to 2 axes. This means that we can place an element on whatever position of the page/the container if we manage to properly set the grid for it.

Of course, I cannot lecture you on the usage of css properties better than numerous resources that we learned from(God bless them) and I am going to leave links to some of them below. However, I want to shed light on one of the most underrated tricks of "CSS grids".

It's Establishing responsiveness in a container with fewer code lines (i.e basically without media queries)

How to build a responsive "CSS grids" container ?

First, let's get a visual representation of what I am describing. Check below: 

The container before applying the "CSS grids" trick

As you can see, this kind of container is often used when we want to place articles/videos previews behaving as a link. Mainly, we seek to keep the boxes positioned accordingly to the screen width while maintaining suitable dimension ratios.

Using media queries for this kind of situation is possible. But, it's gonna cost a lot of css code lines that can eventually affect the loading speed of the page in a deployed website (of course :)).

Alternatively, there is a magical solution (I like to call it so) that uses "CSS grids" properties and most importantly, doesn't count on using media queries (at least for the layout). Below, I list down the main "CSS grids" properties & attributes that contribute to this trick:

• grid-template-columns

• grid-template-rows

• repeat

• auto-fill

• auto-fit

• minmax

The last four are the key to achieve responsiveness. "repeat" is a function that enables splitting the container (on a specified axis) according to a couple of arguments. 

1. The first argument "sets the policy for filling the available space of the container", either "auto-fill" which make sure that the free space is filled with the maximum number of boxes without acting on their width/height, or "auto-fit" which make sure to leave less free space as possible by adjusting the dimensions of the boxes if no more can be added to the line.
2. The second argument "sets the range of possible width/height that the specified policy (first argument) can attribute to the boxes".

To get practical, I have set an example for us to explore what these properties are capable of.

If we use

auto-fill

auto-fit

With the dimension ranges set in advance, the boxes will be arranged accordingly with the screen size.

"auto-fill" Vs "auto-fit"

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

Notice that we didn't use media queries for this one. Consequently, we have saved ourselves from writing a bunch of code lines while realizing the same goal.

Boxes arrangement is adjustable according to the screen width

The proposed trick may reduce pages' loading speed. But it surely enables the front-end developers to achieve responsiveness while writing and managing lesser & cleaner code.

Useful links:

• A "CSS-tricks" Article that sums up all CSS grids features and how to implement them. Read [article]
• A Pen Project where I actually used the trick. Check [CodePen]