This is getting more and more complicated as we go, it's almost impossible to remember all of this in one shot. But what's important is that you're getting to know how many amazing things are possible with Grid. Someday, when you face a challenging layout, you will at least think, hey, I've seen that this layout is possible with Grid, if not, I exactly know how to do this. So let's continue. We're now going back to the very first example we saw in the series, the Services section. Let's look at the code. If you remember, this is how we made the section responsive.

Let's look at the code. If you remember, this is how we made the section responsive. Single column for mobile layout, two columns beyond 480 pixels and three columns beyond 720 pixels. Before we learn something new here, I'd like to change a couple of things. In the very first episode, we did not know anything about the gap property. So I had added this padding to individual div items. Let me remove that now and add double the gap. We had a padding of 1.2rem on top and bottom. So we would need double that 2.4rem of a gap.

Now what if I told you that we can replace all of these lines here with a single rule and still achieve the same result and make it responsive as well? You don't believe me? Let me show you. For our mobile screen size, we haven't specified any columns because by default, it's one single column grid template columns repeat(1, 1fr) if you have to write it like this. So if you carefully observe, the only thing we are changing within the media queries is this number of columns. Let me comment out all of these for now. And instead of 1fr, let me specify a fixed value like say 12rem.

a different example. Consider this section with some statistics. We have small blocks displayed in a grid fashion. And this is of course responsive. As you can see, here's the markup section with 7 or 8 divs. And here's the normal flow without grid. Let's use the concept we just learned to achieve a responsive grid layout with a single rule. But first, let's turn the section into a grid container, display: grid, also add some gap, let's say about 1.6rem. And then the magical rule, grid-template-columns: repeat(auto-fit, minmax(...)), don't worry if