CSS Grid

[00:00:00]
>> Grid. It's more than the world of Tron. Anyone, any Tron fans? No, just me. I liked Tron, it was a good movie. I just like the soundtrack, if I'm being totally honest. Anyway, it's a CSS property. So this is the latest and greatest way to do CSS.

[00:00:24]
This wasn't in the previous version of this course, because it was too new at that point. But now I'm pretty safe to say most people can ship grid on their website with unprefixed it'll just work. So grid is exactly what it sounds like, it allows you to set out.

[00:00:41]
CSS elements in a grid like fashion, it's really useful for like laying out entire pages. So let's get into what I mean with that. So I have all these lovely pictures of Luna, good doggie, and they're laid out in just like a nice little grid pattern, right? With grid that's really easy to do, you say display grid, so to display flex.

[00:01:10]
I tell it how I wanted to lay out things and I just want something that's just, I want two on a row. So, one fraction I think, that's what it stands for. So ,one fraction, one fraction which means 50-50, right? And give it a row-gap aka gutter on the row side of 10 pixels and a column gap, are a gutter on the column side of 10 pixels.

[00:01:37]
And then the grid pictures I took all the way, all the margin and padding and that's what we got. Before you would have had to do like clever margins and float left and a bunch of stuff like that to get this to lay out. So easy with this.

[00:01:56]
If I want to change it to be an all in one row, all I gotta do is that and I'll send it will rearrange them as being everything on one row. So that's what that 1fr is, it's just saying like I just want this many if I put one like this, it should have three on one row and then we'll have one row with just one on it, right?

[00:02:19]
As you might imagine, if I wanted them to be each on their own row, there you go. So that's what the grid template columns does is it just allows you to lay it out on however you want the columns to look and then it'll just figure it out from there.

[00:02:37]
So powerful, this is again, I want you to understand this. This is so much better than it used to be. Okay. So that's what those are. Yeah, that's another thing that might be useful to you. So 1fr, 1fr just said like they're equal sizes. If for whatever reason you wanted the second column to be bigger, right?

[00:03:03]
Now the first one is smaller. So this is a smaller dog picture and this is a larger dog picture. Or you wanted to have like a big one in the middle and then smaller ones on the side, right? All of these are very possible. So the fr is just saying like one fractional thing and like it'll automatically figure out what the percentages that it has to do, and it'll include the gutters.

[00:03:26]
If you do like the row gap and the column gap, it just does all that math for you so you don't have to figure it out. When I worked my very first dev job, I did a lot of PHP, I literally had a calculator at my desk so I could figure out what the pixels were going to be or like the correct percentages to do.

[00:03:43]
Silly stuff, silly stuff you don't have to do anymore
>> When did they introduce this? Because I remember kind of [CROSSTALK] like I want something in the middle of the page.
>> Can I use as a blessing? You can just search for something and it'll tell you the support across all browsers, so right now, 94.29% of current web traffic supports grid.

[00:04:14]
And you can see there we're missing it on Opera Mini, old Internet Explorer, that's probably what takes it down so much. Old versions of Edge, but Chrome since looks like 52 which released in 2017, and or that was Firefox. But yeah 2017 basically is when like really good support started going

[00:04:37]
>> Fun before, yeah, I was just new to me cool.
>> Yeah. So, tracks desktop if you do that, okay plus that. So if you click Filter this will get it probably down to more which are expected, and anywhere. You need to check it relative to your traffic.

[00:05:05]
So for example, Netflix for example didn't see almost any traffic from UC Browser for Android which is more popular. I wanna say second India, anyway other parts of the world, whereas like Netflix at that time had no traffic because we didn't support India at the time. Netflix does now support India.

[00:05:25]
So we've basically got to ignore that browser, but it doesn't have the best support for everything. So, we could kind of use more modern techniques, because they're only 4% is not the best. You want to be like 99% generally. Yeah, there's a lot of stuff here. Anyway, can I use website?

[00:05:48]
MDN will have a lot of that information as well. Cool. So, let's take a more complicated look at this. That was a basic example of just laying out pictures on a page. But let's say we wanna achieve this, where we have like a header, which goes all the way across until you hit a sidebar.

[00:06:15]
We wanna have a body here and the you want to skip a little bit here. And then we wanna have a footer that goes all the way across and we want this sidebar to go span two different rows. I imagine this is like the header of your website, this would be like the body which would be super long, so let's say the body, let's just give this a height of like 600 pixels like something really tall.

[00:06:42]
Notice that the sidebar automatically scaled to match that as well, right? So that's what this is doing for us, we get this like a height of 100 pixels. Get this like a nice height there. We're letting sidebar just kind of dynamically scale and we'll give this a height of 200 pixels.

[00:07:11]
And now this has like a nice thick height as well. So you can imagine like laying out your entire website using grid like this, right? One of my favorite ways to use grid is you can just identify as like all right, grid area you'll give it a name, so you get to choose this name, right?

[00:07:29]
Doesn't have to be the name of the class, it can be anything, I just call it nav header, this one is the main body. This is the nav side and this is the footer, right? Then I can come down here to my page which is overlaying everything and I can just use English to describe what I want to build.

[00:07:50]
So nav header, nav header, so I want this to take two slots here which you can see here it does or three slots, right? Nav header, nav header, nav header and then nav site at the end. Then main body, main body, so two, right? So it goes to, I put a period to signify skip this, put nothing here, and then nav site.

[00:08:14]
So it can see that these two are the same thing, so it'll squish them together and then I want footer to go all the way across. And the browser just slices and dices that picks it apart and makes a layout for you based on that. I can just wanna emphasize that this used to be so much harder to do.

[00:08:35]
[LAUGH] I feel like I keep saying that, but it's the damn truth, right? This was so much harder to do, and now I just get to describe it in English and it just works. Now, you can see I put spaces here to get this all the lineup. It doesn't have to do that.

[00:08:50]
I just did that for clarity sake. But you're welcome to just do like this and it'll figure it out. You don't have to put that whitespace. So you can actually even start combining these things, and I can say grid, template, columns and I can say that I want my first one to take 1fr and then I say 2fr this space here wind up being a lot bigger.

[00:09:20]
And now notice that this, despite the fact that this is only taking up one column here and notice that main body and the period here, end up being the same size, right? They're both technically two fractions because I made this column here take two fractions. And then if I go back here to 1fr, that'll be like that, or let's say I want that to be so small.

[00:09:48]
So now this little gutter here ends up being really small because everything else is taking 10 fractions. So it's cool you can kind of combined all the different properties to get this very specific layout that you're looking for. I just get really excited about grid because it made something that was so hard my life so easy.

[00:10:14]
So, again I'm just scratching the surface here of what's possible with grid, and I think Jen Kramer again CSS teacher here for front of masters has a whole course that goes into the depth and the amazingness that you can accomplish with grid. One of the things they didn't talk about in this course, is you can make your website responsive so that on narrow screens, it looks one way, on wide screens it looks another way.

[00:10:44]
The nice thing about flex and grid is if you just switch a couple properties, they say like, hey, this size making so everything's in columns and then this size it's everything's in rows. It'll just like switch the entire layout with a couple of different things and it just makes everything really easy.

[00:11:09]
So in other words, grid and flex make responsive design very easy. Okay, so I left you a link to CSS tricks, if you want to read more about it. I left you a link to Jen's class if you want to learn more about it from Jen who has a lot of depth in this sort of stuff and is a great teacher.