CSS Grids and Flexbox for Responsive Web Design Properties Review
This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Properties Review" Lesson
>> Jen Kramer: While we've got this grid properties thing up. Let's just take a quick peek at it, because I wanna point out a few items on here that I have not gone over in class. But just to sort of make you aware of them. So, we'll start here at the top of the page and I'm gonna skip over a lot of this but a few things to highlight.
[00:00:20] So with the grid template rows and the grid template columns, those are two properties we talked about quite a bit. I wanted to point out just a few things that maybe of use to you here. So some people had mentioned that they found that the numbers were confusing when working with grid columns and grid rows.
[00:00:37] I had you work with all numbers all morning long. But there's other methodologies that you can use here. So in my examples here and this is in the text file here on line 13 or line 14. Two things I want to point out to you. So, in line 13 with the grid template columns, this is a way that you can name your lines, okay?
[00:00:58] So here I've named a line column one. Which is gonna be 40 pixels wide and a name aligned column two which is three fractions wide. So two things to take away from that one, this is how you indicate your names, they're inside of square brackets you can call them whatever you want.
[00:01:16] And then the numbers that go next to them will correspond to those widths. The second thing that's incredibly cool and I pointed this out a little bit earlier as well, is that the units can be widely different. So in this case, we have 40 pixels and three fractions.
[00:01:31] So the way that this would work is that the browser will set aside 40 pixels. For that particular column and then what ever is left over divides into three fractions. Depending on the screen width. That is also a takeaway you can go with for the rows, so, 50%, 25 VH auto.
[00:01:53] So, again, wildly different units you can mix and match in that way.
>> Jen Kramer: By the way, you can use the repeat. I showed you the repeat syntax earlier today. You can use that with the named grid lines as well, but you want to be careful. So here we have a repeat with a 2, 350 followed by a name.
[00:02:16] And then a 10% outside of that. So if you were to translate that, that would go to 350 with a name, 350 with the same name because it's a repeat, right? So you're naming it the same thing, now you have two lines with the same name followed by 10% which didn't have any okay, so, just some things to be aware of.
[00:02:40] If you look at this and you say, man, that looks really confusing, stick with the numbers, I've already showed you how to work with those. So, this is just some alternative syntax that you may encounter along the way as you work with grid a little bit more. Template areas is something I'm gonna cover next, so I'm just gonna skip right over that.
>> Jen Kramer: I'll point this out here. So I'm done at line 51 in the text file and 55. So line 55 I already told you about grid-gap. If you wanna call out grid-gap in one direction only, lines 51 and 52 you can call out the grid-column-gap or the grid-row-gap, okay.
[00:03:19] So, just the same properties. Grid gap winds up being the shorthand. Skip over a whole bunch of stuff again. Now, I'm in the children portion of this, the grid items. We're taking a look at lines 83 through 86-ish. So far, to this point today, we used the grid hyphen columns, or grid hyphen rows, followed by two numbers.
[00:03:43] If you want to break that down because again that is actually a short hand that have touch you initially. There are some additional properties that would call only one of those numbers so grid current start grid column end. So if you had grid-column: one slash three. You could write that out as grid column start one, grid column end three.
[00:04:07] That’s totally legitimate too. To me, I like the shorthand because I think it’s pretty clear and that’s a whole lot of extra typing. Likewise, there’s a grid row start and a grid row end. So you can do those. Now somebody earlier today from the internet mentioned the span keyword and so forth.
[00:04:27] And I have an example of that here. So if you take a look at line number 90 here. Here is a class that has a grid-column-start and a grid-column-end. So we're gonna start at one and then we end, quote, span four. So the keyword of span four. So what would that correspond to with numbers?
[00:04:49] If I just said grid-column, what would be the numbers that would come after that?
>> Jen Kramer: So these two lines here, 91 and 92, we have grid-column-start, we have grid-column-end, if we were to rewrite this as grid hyphen column coolant what would be the two numbers that would correspond to these two things?
>> Speaker 2: One slash five.
>> Jen Kramer: One slash five. So this is a way of saying start at one, span over the next four lines. Make sense, okay. You can also, if you have names for your lines, you can say span to that named line.
>> Jen Kramer: Okay, so you would've defined those names elsewhere in the document, right?
[00:05:41] So again, this is just to make you aware of some alternative syntax that's out there and available you may encounter. You can choose to use it, you don't have to use it. I've taught you the number type of thing, okay. And then the rest of that I'm gonna skip over at this point.
[00:05:56] So this is the portion of grid that we covered so far. So it's about half of this document. We're gonna cover most of the rest of it at this point.