Use Media Queries with Grid

[00:00:00]
>> Kevin Powell: Now we haven't talked about media queries. We're going to be getting more into that a little bit later when we talk about responsiveness, but it is a little bit of a thing where when we're using, if you're creating three columns, they can get really squished at small sizes and it can look really bad. So it is a really common pattern to use a media query to add the columns that you're going to be creating when you get to larger screen sizes.

[00:00:22]
So we can do this in our project where the area down there where we had those three points, we could actually just turn those into, like this is that middle section that we renamed, we could turn those into three columns. So let's go and do that. I think it'd be a nice little look and we'll use the media query while we do it there. So if I look down here, we have those three. Let's go find that on my index page.

[00:00:48]
And that, whoops, we went a bit too far. That's this wrapper here. I don't want to include the title in that, because if the title is included in my grid, then all of a sudden it's going to end up in a cell too. I want to keep that stretching the whole way across the top. So, starting here, I can come in with a, we can just call it three columns, because in this case, three columns is pretty specific because that's exactly what it's doing.

[00:01:12]
You might want to just call it grid if you wanted to. It really depends, but in this case, I'm going to be very explicitly saying it's three columns, so I don't mind calling it three columns. So I'm starting it there. I have my H1, sorry, my H3, my paragraph, H3 paragraph, H3 paragraph, and then I close my three columns. If any of you are noticing a problem right now with that, good on you, but we'll cover that in a second.

[00:01:38]
I'm going to come here. This is sort of a reusable wrapper class. I like keeping reusable things. I could have a three column somewhere else. So we could come here, three columns. Display grid. You like having a gap. Decent numbers, 16 pixels, 21 pixels, put a number in there so it creates a space between them. If I save, or if I save now, nothing much would happen because we don't have any columns yet.

[00:02:04]
We saw that already. So, I'm just going to do the grid-template-columns first, then we'll worry about the media query. We could just do a 1fr 1fr 1fr, no problem in writing it this way, by the way. If you just like doing it, that's completely fine, but we can use our repeat syntax as well. I tend to use the repeat, but the only reason is it makes it really easy to change this, if ever you do. In this case, it wouldn't really make much sense to change it, but it's sort of a habit that I have.

[00:02:36]
Now I have three columns, but oh my goodness, I said I made a mistake, and now you can see that we've caused some problems. Why, anyone here want to say what I did wrong? The headings and paragraphs are each their own items in the grid. Exactly. So the problem I made is when we create a grid, every direct child of that grid gets its own cell. So H3 is becoming a grid item, it's assigned a cell. The paragraph here is now a grid item, it's assigned to a cell.

[00:03:07]
Another cell, another cell, another cell, and so on. So it completely breaks our layout. So it just does mean we need to organize things a little bit. This is where very often with grid, you get the fun, weird situation where you will have divs that do not have a class on them, because you don't need one. The div is just acting as a structure to keep our content together. You could call it column, but you're not going to apply any styles to this most of the time.

[00:03:36]
Maybe there's situations where you do, it's a card or something, you need to style it, make it look fancier, that's fine. But there's this thing where people always have this feeling that if it's a div, it has to have a class, just holding content, doesn't need to have a class. It felt weird for me for a long time when I was doing this, but I've gotten used to it now, so we can close that. Make a new one.

[00:04:03]
Oops, sorry for the auto-fill that's popping up. And I'm going to show you the structure in a second. I think word wrap is off. So now I have my three columns in there. Let's collapse these down. It makes it a bit easier to see. In there I now have a div, a div, and a div, and all the content is inside each one of those, and we can already see it's fixed the problem here. I must have hit save along the way inadvertently, and I have three columns, so works really well.

[00:04:33]
As I said, though, the problem is at smaller screen sizes. It will, well, this is a bit exaggerated, but at small screen sizes we get over squishing. You can't have columns next to each other at really small sizes. It doesn't really make any sense to do that. So, I do want to include a media query here. I'm going to do it this way because this is how I do media queries now. We'll talk more about this when we get to the responsive side, as I said, but I am going to nest the media query inside because I think it's cool we can do that.

[00:05:03]
Even if you don't like nesting, and even if you find nesting confusing a little bit, nested media queries I find are the easiest thing, and actually easier than doing the un-nested version. So a media query starts with an at symbol like we saw with font-face and at media. Open closed parentheses. Open, closed, curly braces, and then we write some CSS in here. The CSS we want to write is going to come up here.

[00:05:30]
And then inside of the parentheses, we just have to write a condition. Media queries can cover all sorts of different conditions, not just for screen sizes, but we can look at screen sizes. So I'm just going to say when the width is less than. It's an arbitrary number. Media queries tend to be kind of arbitrary. I'm going to say less than, or sorry, when the width is greater than 720 pixels, I want to have my three columns.

[00:06:03]
So let's go full screen with this. I have three columns. If I get narrower than 720, they stack on top of each other. And then we go back to three columns. So it's a condition where we're only adding these columns to this declaration if we're meeting this width is greater than 720 right there. If you haven't seen the range syntax with the greater than symbol here, again, we'll be talking about that a little bit more later on.