Grid: Tablet Layout

[00:00:00]
>> All right, so our next one, then, is our tablet version of this page. And in the tablet version, now we're going to have these images. Pay attention to where they were in the mobile design. The macchiato's up here at the top, the croissants down here at the bottom.

[00:00:22]
And now the macchiato is at the bottom, and the croissant's in the middle. So we've got things going all over the place, different orders. And somehow we need to lay this out in a grid kind of pattern. So what are some of the implications here? Somehow I'm gonna have to grab specific images and put them in specific places, right?

[00:00:44]
So maybe we need a few more classes, maybe. And we're gonna have to think about some kind of way of laying this out, maybe with grid, yeah? Okay, so going ahead and give this a try. All right, so in order to address this next problem with our tablet size, let me make my screen a little bit bigger, and this is going to be at around 675 pixels.

[00:01:17]
What did we need to do in terms of our grid? Anybody have any ideas? What do we need to do in terms of our grid?
>> So I said, I changed the wrapper. All I did was changed grid-template-columns to 1fr 1fr.
>> Uh-huh, perfect.
>> Yeah, and then the rest of my changes were on each individual image.

[00:01:41]
>> And then on each individual image, assign it to a different spot, right? Yeah, that's pretty much the answer here. So, what we've done in the HTML is we've assigned a second class to all of the image wrappers. And cuz I'm super creative, I called them one through five.

[00:01:55]
[LAUGH] You might have different names for them, but that's pretty handy. So what we wanna do then is, we wanna turn on grid. So, wrapper, we're going to display: grid. And then our grid-template-columns will be 1fr 1fr. So immediately it'll go to this, which is actually kind of a nice design by itself, right?

[00:02:23]
Yeah, pretty good, if you like that, you can keep it. That if you wanna continue on with my crazy thing. Then I will also would add a gap of 1rem, which will give us a little bit of space between all those images. Perhaps you are done, that might be all you need to do.

[00:02:40]
But if you wanted to continue on, you might do something like this. So, here for my h1, we need to assign it to a specific spot, so we're gonna use our grid columns and our grid rows. So grid-column, what are our numbers here? We want it to go-

[00:03:03]
>> Each one, that'll be 1/3.
>> 1/3, exactly, 1/3, and our grid row is what?
>> 1/2.
>> 1/2, very good, the other thing I did was I said my font size will be var(--lg). Let's just make it bigger because we can. Okay, done, for .one, Let's say border: 5px solid red, or yeah, red's good, yellow, here we go.

[00:03:49]
That one is one, [LAUGH] okay? Where is that one going to go in our design?
>> Bottom left.
>> This is gonna go in the bottom left. So what are our columns and what are our rows?
>> Column, 1/2.
>> 1/2, and our rows is gonna be what?

[00:04:08]
>> 5/6.
>> 5/6, 1/2, 2/3, 3/4.
>> It's 4/5.
>> 4/5, yeah, okay? So we've got grid-column: 1/2, and grid-row: 4/5, cool. Okay, two, two is the coffee cup here, where is the coffee cup gonna go? Right on up here, so what is that in terms of columns and rows?

[00:04:56]
Grid columns is gonna be?
>> 2/3.
>> 2/3.
>> 2/3, the rows is gonna be?
>> 2/3.
>> 2/3, very good, okay, so 2/3, 2/3., okay, sweet. And if you notice, the ice coffee went exactly where it's supposed to go, so we don't even have to call out a place for that.

[00:05:24]
The next thing we should do is try to move this green tea, I guess, down to, next to the macchiato, so, Let's copy that. I'm gonna guess this is number four. Okay, so it's number four, so where is that one going? Grid column what?
>> That's 2/3.
>> 2/3.

[00:06:04]
Do I really have that many borders? I do, I'm sorry, I'm confusing you now, let me get rid of those borders. Okay, so 2/3, and our grid row for that one would be?
>> Is that 3/4, yeah.
>> 3/4?
>> 4/5. [LAUGH]
>> 4/5, okay, so then all that's left is the croissant, which is image number five, right?

[00:06:40]
We know that cuz it was the last one, and, let me get rid of that ugly border. And for image number five, what have we got?
>> grid-column: 1/3.
>> 1/3 for our grid-column. And our grid-row would be?
>> 3/4
>> 3/4.
>> 3/4.
>> I can't tell, are they all supposed to be the same height, or is that croissant's supposed to be taller?

[00:07:07]
>> I think we made these a little bit bigger this time around. I have here that the height for five will be 400 pixels. Okay, so we can set one of them higher. And if you want to also set the image wrapper, put it before, img-wrapper. And the height will be 300 pixels.

[00:07:37]
Now, the reason we wanna put this before is that these are both just one class, so they have the same weight, right? So for our middle croissant image here, we set the height to 300 pixels, right, because it's got both a class of img-wrapper and five. And then five, we have a height of 400 pixels, so that one takes priority, right, overrides it, cuz it comes later in the code.

[00:07:59]
If we swap the order of these, Now they're all the same height, the order matters, right? The order is part of the big C, the cascade. So by putting that image wrapper later, see how that changes? Yes?
>> Can I see where you declared the rows, again, for the grid?

[00:08:24]
>> Yeah, up here in the wrapper, I actually never declared any rows. We just declared columns, so grid makes rows automatically for you.
>> Yeah, we can declare them. We can say grid-template-rows of repeat (3, auto). And now we've been very clear with grid, we wanna have three rows, and they show up here on the page.

[00:08:50]
But since grid tries to guess what you wanna do, [LAUGH] so to speak, it will create those rows for you even if you don't call them out.
>> So effectively, it's already doing 3, auto?
>> Yes, it's doing that for you, yeah, great question, okay? So there we go.