CSS Grids and Flexbox for Responsive Web Design CSS Grid: Practical Application

Transcript from the "CSS Grid: Practical Application" Lesson

[00:00:00]
>> Jen Kramer: So we are on to chapter 11, and I call this one Grid Grid. And the reason why is if you go on ahead and open up the beginning files here, the grid.html files, and go on ahead and display that in a browser, we're back to pies again.

[00:00:19] So you all are gonna remember this from yesterday, we coded this with floats, we coded this with Flexbox. Now we're gonna go through and code this one more time, this time with Grid. And the purpose behind that is, coding the same thing three different ways, you actually learn a lot about the advantages and disadvantages of each type of layout.

[00:00:41] So we can go ahead and do this together. What I've given you for your starting files are in the begin folder. There's a grid.html, and there's a grid.css. Go on ahead and open up both of those. And I believe what I did was I copied over the, I think, a lot of the code from the Flexbox stuff that we did yesterday.

[00:01:05] So let's just start by editing our HTML here, and let's work on row one, okay. And we'll just start by editing the HTML and then we'll write some CSS for this. So if you take a look here at row one, once again it's the four boxes that are all next to each other here in a row.

[00:01:26] Right now all of these have exactly the same class. What would happen if we try to display this with Grid in a web page where I have four items with the same class, and then therefore the same grid column and grid row dimensions? What would happen?
>> Speaker 2: They'd be on top of each other.

[00:01:42]
>> Jen Kramer: They're all gonna stack on top of each other. So we need to come up with a way that we have individual classes for each one of these articles. [COUGH] And what I did was I fell back to some really old coding naming technology that we use to use with tables, okay.

[00:01:58] So some of you may not be old enough to remember this, but what we used to do was we would call our classes something like, r1c1, so that's row one, column one. Okay, and that would refer to say the upper left hand corner of your box. So that's the technique that I've used for naming these boxes, because they're not anything special.

[00:02:23] You can of course call them whatever you want, just as always true in CSS. So I'm gonna call this r1c1. My second article then would be what?
>> Speaker 2: R1C2.
>> Jen Kramer: r1c2, my third article would be?
>> Speaker 2: r1c3
>> Jen Kramer: r1c3, and my fourth article would be? r1c4, okay.
>> Jen Kramer: So that's those first four boxes here in our HTML.

[00:02:55] And then if we flip over to our CSS,
>> Jen Kramer: What we're gonna wind up doing here is we're gonna come on down to the wrapper here, and we can go ahead and add to our wrapper.
>> Jen Kramer: So we're probably gonna do what here on our wrapper? What are our properties gonna be?

[00:03:19]
>> Speaker 2: display: grid.
>> Jen Kramer: display: grid.
>> Jen Kramer: Okay, and maybe we'll have some kind of grid gap of some amount.
>> Jen Kramer: Say two percent, okay.
>> Jen Kramer: Now the other thing that you're probably gonna wanna do, and you can do it right now where it says grid system here, starting on line 34.

[00:03:48] All this code that's here we're just going to rip out the first two declarations, the row and then that class col thing. We'll rip those out. And then you can keep the background colors if you like, the Martha Stewart colors. What we'll wind up having to do here is .r1,

[00:04:10]
>> Jen Kramer: c1, .r1c2, .r1c3, .r1c4. Or you can use some kind of fancy attribute selector if you want, and so that's one way of doing this. And I guess I've actually also could do it this way. We could set up just our articles since many of them are yellow.

[00:04:38] We could set these up default as the yellow background color, and we can override those later with other classes if you want. That might be less typing. Okay, down here on line 52 we have our reverse. That flex direction stuff doesn't fly with Grid so we can just sort of go on ahead and kill that reverse.

[00:05:01] We actually don't need that at all.
>> Jen Kramer: And then what's down here in the media queries you can delete as well because we'll be adding our own stuff to these.
>> Jen Kramer: So for this first row then let's go ahead and start with the desktop layout on that. What we've done so far is we've declared that we have, our wrapper is gonna be a display of grid, we have a grid gap of two percent.

[00:05:34] And what we're going to do next is, down here under the desktop, let's on go ahead and add to this some information about our layout, okay. Then I'm gonna show you a new way of typing this. So obviously we could do exactly what we have done in the past.

[00:05:53] Which is we could set up all of those classes, we could set up our grid rows, or grid columns and our grid rows as to where each one of these things is going to be. But here's some other things that we can do with this too. .wrapper, what we're gonna do is this, we're gonna call out our grid template columns,

[00:06:17]
>> Jen Kramer: And our grid template rows.
>> Jen Kramer: And we're gonna do it with a different type of syntax for calling these out, okay. So the syntax that I'm gonna use is this, repeat(4,1fr), okay. Repeat, and then in parentheses, 4,1fr. All right, so in the Mondrian examples, when we called out our grid template columns we had a number for each one of those, in pixels in that particular case.

[00:06:56] Which we're talking about the columns widths and so forth. In this particular case what we're saying here is we would like to, obviously, repeat what's inside of the parentheses. So we're gonna have four columns, that's what the number four refers to, and then it's width is 1fr, which looks like one french, right.

[00:07:17] But it's not, it's actually one fraction. So this is one of the incredibly cool things about Grid. If you think about working in floats or Flexbox, we typically work in the same units as we're working on say the width of our page. And so frequently my style is I call out widths in percents.

[00:07:37] So I have a percent width for my cell, I have a percent width for my margin, it all adds to 100%. You don't like to mix those units, right. We don't generally have pixels that we mix up with percents that we mix up with ems, it's just a disaster, right.

[00:07:52] Then we're really not sure what we're doing. The cool thing about Grid is that Grid is very able to mix up all of those units as you're working across things. So right now we already have a grid gap of two percent, and now I've thrown in this thing called fr, so one fraction.

[00:08:08] What does that mean? We're gonna have four columns on the page, so basically take whatever's there on the page, figure in that two percent width in between the columns. And by the way, whatever is left over, divide it into four pieces, four fractions. Isn't it great? Finally, the browser is doing math for you.

[00:08:28] It's fabulous. So the fr unit is a really powerful unit that you can use here for Grid. And you can, of course, have as many fractions as you want. We could have said eight fractions here if we wanted, but with four columns, in which case it would say those four columns would each be eight fractions wide.

[00:08:50] So the total width of the page would be what? 32 fractions, right, 8 fractions called out for the width times 4 of those. Make sense? You can have as many fractions or as few fractions as you want. And you can also have decimal fractions, by the way. So if you wanted to work your whole page as one fraction, then you wanted to work in fractions of a fraction, you can do that.

[00:09:15] So I can say 0.33 fractions or whatever, 0.25 fractions. Okay, so that's one of those, and then for my template rows I'm gonna do the same kind of thing again. Repeat, in this case I have five rows, so I'm gong to say five comma and then it's, usually the next thing I specify is width.

[00:09:38] I'm just gonna say auto. We don't really have a strong feeling about the dimensions on these rows, so just whatever is there. Take the content, make it all work, okay. So auto is a great keyword also.
>> Jen Kramer: So far, so good? Okay, so that’s what we need there to figure out the widths and the heights of our various columns.

[00:10:03] All right, so why don’t you take two minutes and you’re gonna go ahead and write the classes then for r1c1, for the desktop dimensions r1c1, r1c2, r1c3, and r1c4. Go on ahead and write those out now, the grid column and grid row values. If we go on ahead and look at the webpage,

[00:10:35]
>> Jen Kramer: It probably looks like this. Yeah? All right, so while we've explicitly called out locations at the desktop dimension for these boxes, the first row of boxes, the rest of them don't have any classes associated with them. And so what Grid has done, as John's gone ahead and said, okay great, you made all these spots for me.

[00:10:56] I'll put one unit of content in each one of those spots, awesome. Right, and remember again, this is a parent-child relationship. So the parent is the wrapper, the children are the individual articles, and so that's what Grid is looking for. It just looks for all the children of the wrapper, and it assigns each child one spot here in the grid, okay.

[00:11:17] Now, so given that it does that automatically, why did we go through our CSS and spell out exactly where all of these things are located? Anyone have any idea what the thinking there is? It seems awfully repetitive, doesn't it? Well the reason why is because we're gonna wind up placing those grid cells in a different location when we go to the media queries, right.

[00:11:44] So if we were going to go to our media queries, we've started with just the desktop dimension here. We could actually move the wrapper declaration here to the tablet, because this is gonna hold true for the tablet dimension and the desktop dimension, we're gonna have four columns. And then our layout here on the tablet is gonna change, right, all these cells are gonna change position.

[00:12:10] True? So these are gonna go to 1/3 and 3/5, yeah. Why am I not calling out the rows here?
>> Speaker 3: Auto.
>> Jen Kramer: Yeah, it's very smart, right, it's automatically, it's looking at the source order of the HTML, it's putting them in the order anyway. So you can call out the row locations if you wish, if that is helpful to you.

[00:12:42] If you don't want to, it's what Grid is gonna do by default anyway which is why I haven't listed those here. Make sense?
>> Jen Kramer: Okay,
>> Jen Kramer: So if we go in ahead and save that.
>> Jen Kramer: And we can refresh our page, and we're just looking at that first row and it's behavior.

[00:13:09] So when we narrow that up and get to our break point, somewhere along the way, there we go. We get our two and two, which is what we would expect, yeah. Okay,
>> Jen Kramer: How are you guys feeling about this so far? Pretty straightforward? Okay, yes, Peter?
>> Speaker 2: So what I did was I just I changed the grid template columns to two-

[00:13:36]
>> Jen Kramer: Okay.
>> Speaker 2: And one fr.
>> Jen Kramer: Yep.
>> Speaker 2: Do you think it would be more likely for people to keep it the same-
>> Jen Kramer: Sure.
>> Speaker 2: All the code or to change them up in the media queries?
>> Jen Kramer: You could absolutely do that instead. So what Peter is saying that he did is his solution was this.

[00:13:52] So he would have had in the desktop, he would've had the grid template columns and the grid template rows at four and five, just like we said up here. But then when you come up here to the media query, you said repeat.
>> Speaker 2: I just said two.
>> Jen Kramer: Two.

[00:14:10]
>> Speaker 2: And then I changed all the columns. So maybe it's not as efficient.
>> Jen Kramer: And then you changed all the columns here? Okay, so this would be like one, two.
>> Speaker 2: Two, three.
>> Jen Kramer: And this would be two, three. Okay, so that's another possible solution. I don't see a particular advantage one way or the other.

[00:14:28] It sort of like what make sense to you, right. My methodology is calling out that grid template columns and grid template rows once and just changing the position of the cells. He's calling them out twice, so I think that probably just boils down to preference. I don't see a huge advantage one way or the other.