Responsive Grid with CSS Grid

[00:00:00]
>> Now that we have a desktop version of our grid system, let's go through and add to this now the mobile versions of this. So to get started with that, what I'm going to do is I'm going to take my, just these span type of items that are down here at the bottom, the span 2, 3 and 4.

[00:00:21]
And I'm going to contain those inside of a media query. I'm just a add media and we'll say it's a min width of 1000 pixels which may not work well on the display that I'm using here right now. So I may need to adjust that a little bit but it probably will work fine on your monitor.

[00:00:42]
I've got mine kind of scrunched down a little bit here so you can see my code nice and big. When we get in depth out a little bit. Now notice I did not include my grid declaration here inside of this particular media query and the reason why is.

[00:01:00]
Because in this particular case, I'm gonna have a tablet media query where I'm gonna declare my grid. And all of the parameters there in, that will cascade into my desktop media query later, so I don't need to redeclare display grid and all of that other additional information. I can declare at once inside of the tablet, and it will cascade into my desktop media queries because I'm using min width media queries and will stack them up on top of each other.

[00:01:32]
In fact, I'm going to back this off to 800 pixels. So we have a little bit more room on my particular monitor. You can keep yours at 1000 if that works better. Maybe I even need to back it off further. 700, something like that, anyway. Then up here, around my wrapper, I'm gonna set this up with a media query as well.

[00:01:58]
This will be at media and we'll say a min width of 600 pixels. And the curly bracket down here on the bottom, don't this. So that'll get us started here with looking at this both on tablet and then later on desktop. What we need to do now is to think about exactly how this is gonna work across are various break points.

[00:02:34]
And we are going to use exactly the same model that we use with Flexbox. So we're gonna have to think about how some of these layouts are gonna change over the course of working on this. We go so right now here's the desktop layout. Okay, so there's the desktop layout as we've got it and one of the things we need to add to that desktop layout real quick before I move on is some ordering down here on the bottom for this last row.

[00:03:06]
Remember we wanted that in the 1,2, 1 configuration snd right now we have 2, 1, 1 for that configuration so let's add that before we move on. And so down here in our desktop media query let's add some additional styles to this. We can add ordering to this it works exactly the same way it doesn't Flexbox exactly the same property and all the rest of it which is really nice so I'm going to create a class of order.

[00:03:38]
Let's say order 2, With an order of 2 and we'll set up one with order 1. With an order of 1 just like that, and then in our HTML you have small I can make this go up here in our HTML then we can add to this additional classes to deal with the ordering.

[00:04:15]
So here in our first cell we want this to be order two and then in these other figures this next figure specifically will have have a class of order one. And that will swap things around nicely. And maybe we have to add one more with a class of order3.

[00:04:41]
And we can write in that class down here. Order3, order3. And so now you should see that the way that you wanted it to go, all right? So order 1, order 2, order 3 all lined up here in that particular row as you would expect. Because it's here on the desktop, then we'll reorder here.

[00:05:07]
It won't reorder necessarily on the tablet unless we specifically want to do something different on the tablet, which we don't necessarily. And then of course, on mobile, it's going to display in source order. We won't actually put anything outside the media queries here dealing with layout because what we'll do outside of the media queries.

[00:05:28]
These are just a bunch of figures which are block display by default. They will just stack on top of each other going down the page which is often the layout that you want on mobile anyway. There are some other styles that are down here later in the document that provide the default styling.

[00:05:46]
None of these styles have anything to do with the layout of the web page. Okay, so now that desktop is done, as we move on to our tablet display let's get to our appropriate break point which looks like right about in there. And so here what I'd like to have happen is I'd like my this row of four boxes that first row.

[00:06:13]
I'd like it to turn into two boxes spanning over two columns or effectively that followed by two more boxes, spanning over two columns. So we can write that fairly easily here as well. And we're gonna leverage more of those span properties that we used earlier. So here what I'm going to do is I'm going to say figure, just my generic HTML figure element.

[00:06:44]
Remember all the classes come later, they're also more specific so they're gonna over rewrite whatever I put here. So for figure, I'm going to say grid column span 2. See how nicely that is. We don't have to do it once again, still no math, no worrying about the gap, taking that into consideration, all of that kind of thing.

[00:07:07]
So here's my first row very simply went ahead and distributed itself very nicely we'll have some more tweaks here to make a little bit later on. When we go to our desktop though notice that it's gonna continue on and that is because in this first row, we just have a series of figure elements.

[00:07:32]
We're gonna need to override that layout when we get to our desktop. So here in our desktop layout, we can say our figure, Will wind up being a grid column. Of span one basically span across one column. So there it is working nicely on desktop, and when we go to tablet there it is working nicely on tablet so row one is all done.

[00:08:05]
Row two we want it to be too across here. And when we go to, tablet layouts, we want it to remain that way so we don't have any changes we need to make here on tablet for that particular item. For row number three, we want remember we want our, the one on desktop that took up three columns.

[00:08:32]
We want it to take up the full width here, and the one next to it we want it to take up the full width as well. So let's write some styling for that. We had a class of span3 which now we can repurpose here in our tablet media query, we'll just simply say grid-column of span4.

[00:08:57]
So now it will take up that full row. Now this other individual box here inside of row three it's just a figure all by itself, we want this one to behave a little bit differently. Its default figure behavior is to take up one column on desktop and two columns on tablet.

[00:09:22]
But in this case we wanted to take up one column on desktop and four columns on tablet. So we are going to write a style for that as well and I'm gonna call this style. Class of you could do something like span1-lg, something like that. And what might be your name for that particular class and then you can write it here span, in fact we can combine it.

[00:10:01]
Right here with span3, we could say span 1-lg so that's gonna have that property of spanning four columns. And now it does but it will also do so on desktop because we haven't told it to go back to one column on desktop, so we'll need to override that when we get to desktop.

[00:10:32]
And so here with our figure that now spans one column, we can combine that and say power span1-lg will also span one column. And so it does. So far Things are looking good for our first three rows on both tablet there, there it is. There's the tablet and on the desktop.

[00:10:59]
So now row number four, row number four. Remember it needs to span across four columns on tablet and on desktop. We actually have that style here on desktop already we could just simply cut and paste that from the desktop to the tablet media query. Because we actually want the same behavior at both breakpoints.

[00:11:23]
So we'll specify it on tablet and it'll carry through into the desktop media query. So there that one is on tablet. There it is on desktop. And then in our last row always a little bit trickier than the other ones. We want to have this first cell we'd like that to stretch across maybe the full width and then the other two cells to be on the next row, just as they were.

[00:11:53]
And so we can set up some styling for that. So what I'm gonna do here five this first box, we've called it just a regular old span to before. What I'm going to do now is change this and I'm gonna call it a span2- whatever -medium, -large something like that.

[00:12:18]
And then we can set up a class for that. What I'd like it to do at the tablet media query is I'd like it to span across four columns. So we can say span4-md, let me fix the HTML, this is a span4-md as well. And then all we have to do is just change it down here inside of the desktop.

[00:12:55]
So span2 and span4-md we'll have that same behavior oops Okay, so there's the lineup here on the desktop and when we go to our tablet layout, there's the one spanning across the full width. And we have the two cells here that show up underneath. Everything is looking great.

[00:13:27]
If you that grid gap here strikes you is a little bit big, you could always change that here inside of your tablet media query. Maybe you wanna go down to something like 2% here on the wrapper, maybe tighten things up a little bit even 1%. Maybe you want them even a little bit tighter you could do a combination of numbers here 2% 1% oops sorry the other way around 1% 2%.

[00:14:01]
We'll get you slightly different dimensions. One will be columns, the other will be rows. So you can put in two numbers like that to make this look a little bit better on tablet. And of course, then when you get down here to your desktop if you wanted to go back to that full 4% gap, then you just write a style for that wrapper gap 4%.

[00:14:25]
So you can override anything anywhere along the way. Again that's not necessarily something that we do so much with Flexbox, but it's absolutely possible to do very easily with grid. It's really nice because always the math is done for you in grid whereas you're gonna have to do that math yourself with flexbox.

[00:14:45]
So this is some pointers on how you can write your own grid system using CSS grid so again this is something that you can do to get away from using some of the responsive design frameworks. You don't have to buy into a bootstrap type of grid system or anything else you as you see here it's pretty straightforward to write something with grid.

[00:15:08]
That's very, very lightweight and will do exactly what you want. You can program all of the behaviors that you want across the various breakpoints really pretty easily, just by counting how wide you want things in terms of the number of boxes. As opposed to Flexbox where you do have to do real math.