How Easily Create Responsive Layouts Using CSS Grid

Do you often find yourself banging your head against the wall when trying to make your page responsive? I sure did for a long time, that was before I became familiar with the grid system. I had already seen and used grid a few times but I was a little intimidated by the huge amount of properties that it has to offer, but today I’m pretty comfortable creating layouts with just CSS Grid, so in this article, I want to show you what I think are the most important properties that you can use in CSS grid to make your web page fully responsive.

The way I see it there are two main ways to use this amazing tool in your page, those are:

• Grid template columns & rows or grid areas combined with media queries.

• Grid template columns & rows combined with the repeat and minmax functions.

I’ll show examples of these two methods in the next section. If you need to refresh your knowledge of the grid’s main properties you can click HERE for a comprehensive list of tutorials on all that this system has to offer.

To continue you should be aware of how to create a grid container and have a basic understanding of how the columns, rows and grid areas work.

Combining grid with media queries

This is the easier way, in my opinion, to adapt your page to multiple screen sizes. The trick is to create your initial layout using the grid template columns (and grid template rows if you need explicit rows) or grid template areas and utilize media queries to change the display of your container depending on the screen size, simple right? Let’s see this in action.

With a little HTML

<div class="grid">
    <div class="grid-div"></div>
    <div class="grid-div"></div>
    <div class="grid-div"></div>
    <div class="grid-div"></div>
    <div class="grid-div"></div>
    <div class="grid-div"></div>
    <div class="grid-div"></div>
    <div class="grid-div"></div>
    <div class="grid-div"></div>
    <div class="grid-div"></div>
    <div class="grid-div"></div>
    <div class="grid-div"></div>
  </div>

And some CSS

.grid {
  width: 85%;
  margin: 2em auto;
  background-color: beige;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-div {
  height: 200px;
  background-color: green;
  border: 1px solid black;
}

@media screen and (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

We get this. You can see the behavior of the grid as the page resizes.

Utilizing grid template columns and rows to their full potential

If you choose this method, you’ll have a more compact set of rules and you won’t even have to write a single media query, isn’t that amazing?! To make this work you’ll need to be familiar with the repeat, auto-fill & auto-fit, and the minmax functions. Here’s how this will go:

We’ll use the repeat function to create a variable number of columns, for this we won’t assign a specific number to the function, we’ll let the auto-fill or auto-fit properties handle that part.

The number of columns will be determined by the auto-fit property in this case (you can read about the difference between the auto-fill and auto-fit properties here).

The size of the columns will depend on the values that we give to the minmax function. In this example I want my columns to have at least 250 px of width but I also want them to take up the remaining width if another column can’t be created due to a lack of space.

We end up with something like this. If you notice when you shrink the page, the columns will get smaller but only up to a certain point and then the layout will change to have one column less. The opposite is true if you make the page bigger, you’ll see that when there’s enough space to create a new column, the layout will update to contain the maximum number of columns possible with the minimum width necessary.

Conclusion

To wrap this up I would like to point the biggest drawback of using the second method, which is that if you want to remove content from your grid as your page gets smaller, you won’t be able to make that happen. Instead, it would be better to resort to mixing media queries in your stylesheet, that way at the same time that you change the grid template columns at each breakpoint, you can also set the display of the elements that should be hidden to display: none.

I hope that this article was of some use to you. Thank you very much for getting this far and of course, KEEP ON CODING!