This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Exploring CSS Grid Examples" Lesson
[00:00:00]
>> Jen Kramer: Here we have the same drawing that you've been looking at now for two days. But we've changed it just slightly this time. So I have a wrapper going around this particular bunch of cells that are inside of this, and each cell notice, has a different class this time.
[00:00:17] So rather than calling out a single class name and applying it to multiple cells, every cell here has it's own unique class, all right? So this is very important because, [COUGH] this is the way that we're gonna wind up having to specify. Because now we have to specify our cells in two dimensions.
[00:00:35] And if two cells have the same two-dimensional layout, what are they? On top of each other, make sense? Okay, so previously, we could just have one cell all next to each other, right? And they'd lay out in a row but now, because we have to specify both the horizontal and the vertical.
[00:00:56] If the two cells have the same dimensions they are on top of each other for better or for worse. Okay, so just like flex backs where we had parents and children, we had flex containers and we had flex items same kind of thing here. We have grid containers and grid items okay?
[00:01:14] So the parent here's the wrapper, the cells are the children. So the wrapper is going to have a very simple code to get it started. So the wrapper with the display grid and a grid gap of ten pixels. If you're offended by pixels, I apologize. [LAUGH] When I started making these slides, five months ago or six months ago, pixels were the only thing supported by the browser for grid gap.
[00:01:41] And like a few days ago I tried it with Ms and it actually worked with Ms, so that bug finally got fixed, okay? So be aware that you don't have to use pixels anymore for the grid gap, but it was a thing for a little while. You could only, it would only work with pixels.
[00:01:55] And of course, what do you think the grid gap is?
>> Speaker 2: The space between.
>> Jen Kramer: The space between the grid cells. Space between the grid cells. Okay, ohis is how we're going to start to specify our grid cells on our page. This is the first kind of syntax we're gonna learn for this.
[00:02:12] So we have our wrapper on the outside. That's the pair where we declare that it's a grid and we we can declare grid gap. And there's some other properties we're gonna add as the day goes on. In order to specify ourselves, what you're going to think about is the series of numbers, okay?
[00:02:28] And the numbers are sort of four column system like this or as I've specified them up here. So just before the start of the first cell is line one, just after that first cell is line two, make sense? Okay and then we can then specify exactly how we want our grid cells to however we want them to be.
[00:02:50] Just by doing a grid column here, right? So we are going to go from one to two and then the second one here, we're going to go from two to three. The third one, we're going to go from three to four. What would the call for class look like?
[00:03:06]
>> Speaker 2: Four to five?
>> Jen Kramer: Four to five. What if I wanted column 1 here to go and occupy the first two cells? What would its numbers be?
>> Speaker 2: One, two, three.
>> Jen Kramer: One three.
>> Jen Kramer: I will tell you that it is possible that if you really want you can name these lines instead of doing the number thing.
[00:03:31] But personally, being the minimalist that I am, I don't see a whole lot of point in naming my lines. Like, writing the code to name the lines, then doing the extra typing to name those lines, but it is a thing you can do [LAUGH]
>> Speaker 2: You mentioned that you could also span it, so instead of saying one to three, you could say, span one two?
[00:03:50]
>> Jen Kramer: Yes, you can also do that. There is a span keyword you can do as well, yes. But again, that's four extra characters you have to type [LAUGH]. So by doing the slash here, that also works. Okay, [COUGH] so what if we made a little bit more complicated sort of layout here.
[00:04:11]
>> Speaker 2: Not only the grid-column are we gonna work with now, but we're also gonna work with grid-row. Make sense? So the columns are going across the page vertically, one column, two columns, three columns, the rows are going down the page horizontally. And the number thing works exactly the same way with the rows as it does with the columns.
[00:04:31] So here we go. We can just go on ahead and call out a series of grid columns and grid row values, and that winds up being the layout for the webpage. So like I said, I'm gonna just sort of mention alternative syntax at the moment. We're gonna go through a little bit of this later on today.
[00:04:47] So the name of the grid template areas is something we're gonna cover later on today. You can also call out some patterns. So some number of rows an/or columns, that way. But we're gonna master this first kind of syntax, calling out the grid row and the grid column.
[00:05:05] You're just using the numbers. We're gonna focus on that for a little while, get comfortable with that. And then I'll go into some of this other syntax that you might have heard of later on in the day. Okay, so reordering is super easy with grid as well. Let say that you have this type of layout.
[00:05:21] You can put this in the exact order that you want for search engine optimization or your mobile, the boxes on top of each other exactly what order you want it on your mobile screen. Or the order that you want for accessibility and hopefully all three of those things are exactly the same, [LAUGH] so that stuff gets served up correctly.
[00:05:41] So your HTML source order can be exactly what you want. And then it's very easy to reorder and I will go ahead and show you that.
>> Speaker 2: [COUGH] So I'm in if you're following along at home, I'm in the day two grid folder, chapter eight grid intro. And I am opening up reordering that HTML and reordering.CSS.
[00:06:14]
>> Speaker 2: And I'll show you what that code looks like. So, here's the really cool thing here. So we've got a super simple layout, right, a header, some kind of article and an aside. As we start to shrink this page down, we can completely reorder everything on the page, totally radically different than what we had before, okay?
[00:06:37] And then of course, come to a mobile layout like this,okay. So that's pretty amazing, that is not something that you would really be able to do with floats at all, okay. So the HTML for that is really super simple. We have just a header, we have an article with some blah, blah and we have our side, right?
[00:07:03] And then in our reordering here, all I've done is for my wrapper I have my display of grid and my grid gap ten pixels. Okay. The wrapper header article aside, that's all got just some colors associated with it. And then down here in my media queries I've simply calling out where these things should appear on the web page using grid column and grid row.