Reviews & Images Tablet Styles Exercise

[00:00:00]
>> We can start to assign these to the correct grid cells. So here's what I'd like for you to do. I'm gonna give you five minutes, and I'm going to tell you to see if you can figure out how exactly you'd assign all of those things to the right grid cells.

[00:00:14]
You have all of the selectors that are here. And I'm going to put up our little drawing here on the screen for you so that you can count the grid lines. You're gonna need to assign every single one of those selectors its location based on the grid-column and the grid-row.

[00:00:35]
So I give you five minutes, see if you can come up with the right numbers for that to set up that layout, okay? Great, so hopefully you got those numbers just fine. So here's what we did if you take a look at that graphic. So for our first quote here, we're going to count, so one, two, three, four, right, that's gonna be four.

[00:01:03]
One to four will be this area here for this first part, and one to two will be its row count, okay? Likewise, over here for our second quote, it's four, five, six, seven. So four slash seven for our column count, and one to two for the correct row.

[00:01:21]
Likewise, down here on the bottom, they're the same numbers in terms of columns, one slash four, four slash seven. But we're gonna work with rows three to four. Now for the images in the middle, we have something a little bit different there. So for the images in the middle, I just simply said, grid-column span 2.

[00:01:44]
And what that means, is take each one of these images and just have it span two columns, whatever those two columns are. It's more of a relative kind of thing. So it doesn't start specifically in any particular place, doesn't end in a particular place. But because the images are in this order, because we've assigned them the same order property, they line up very nicely right here in that particular row.

[00:02:10]
One thing that is missing from our images is the border around them, so let's add that. Border of 2px solid var (--white). That is something that's missing from that design. Okay, so the very last thing we need to do now is, we need to do a little bit of alignment here with these quotes.

[00:02:33]
Because they're generally in the right spot, but it's still not quite pretty, right? So we need to play with these a little bit and get them pretty. So starting with our first quote here in the figure:first-of-type, I'm gonna add justify-self: end. And what that will do is take that quote and pull it over to the right.

[00:02:57]
So in this particular orientation, left is the start, right is the end. And so this will basically write a line or quote inside of that grid cell. So that would mean that for the one next to it, the best album ever, what is our justify-self property gonna be here?

[00:03:20]
>> Start.
>> Yeah, start So that'll pull that one over, okay? And then we can do the same thing here on the bottom, justify-self: end, And justify-self: start. Okay, all right. So, I got a couple of things going on here. So we're closer to making those quotes pretty.

[00:03:58]
We also have an issue with that border around those images. See that tiny little gap there? Let's address that in just a moment. I do see it, we're gonna get there, but let's finish up here with these quotes here first. Okay, so then the last part of this, to achieve perfection for those particular quotes, what I did was, I added some padding around them.

[00:04:18]
And that padding value will be different for each one of these. And how did I achieve it? Just trying a whole lot of things until something worked. And it got exactly where I wanted it to be. So these are the padding values that I came up with for this.

[00:04:34]
For the first of type, this would be padding would be 1rem, 5rem, 0, 5rem. Now I just typed in four values there for padding. What is the order there? Where are those values applied?
>> Clockwise.
>> Clockwise, a lot of people think of it as a clock, so we start at top, right, bottom, left.

[00:04:59]
If you're a visual person, that's the thing that you use. For those of us who are challenged with clocks, [LAUGH] what is another way to remember those four numbers? Anybody know this one? Top, right, bottom, left, TRBL. Remember that and stay out of trouble, trouble, get it? TRBL, cool, all right?

[00:05:28]
So that's the padding that we applied for that one. Then we'll apply some padding here for our second one. The padding will be 1rem, 3.5rem, 0, 3.5rem. Again, I wanted them centered over the middles here. They have different lengths of letters. Because we've spanned all of these grid cells, we have some room to move around, and this is just what happen to work.

[00:05:59]
Okay, for the reviews on the bottom, we've got padding 0, 2.5rem, 1rem, 1rem. And then for the last one, it's a padding of 0, 1rem. Okay, We may actually wanna bring those over a little bit more. Let's see. It's very highly scientific method. You can just continue to tweak these.

[00:06:49]
There we go, maybe more like 2 there on the left and the right, TRBL. Let's move this one over a little bit also. Did it move? Maybe it is where it is. Okay, I've probably reached a maximum there.
>> It's adjusting itself based on the fact that the starting line in the grid is off-screen.

[00:07:19]
So technically there is 3rem there.
>> Okay, yeah, that's exactly what's going on, thank you. So actually if I set that to 0, that's closer to what I want. No, no.
>> You just need to increase it beyond 3rem. If you did 5 or 6, I think that would probably be enough of a buffer to push the threshold beyond the space that already exists there.

[00:07:48]
>> Okay. Okay, well, I'm gonna leave it there just for now. You guys know how to do this, you just continue to tweak away until it looks the way you want it to look. So the last thing is that little gap that we have there between the image and the border at the bottom.

[00:08:06]
That is caused because I put this border here on the div that goes around those images, and that gives us just that tiny little bit of space there at the bottom. So if we don't want that, if we go, we'll just end our featured image style. And to this we'll add .featured-img img.

[00:08:27]
So we're actually going to apply our border to the image directly, and that will resolve that little gap down there at the bottom, okay? So anyway, if you continue to play around there with the spacing on those quotes at the bottom, you will get to perfection just by changing the padding, okay?

[00:08:49]
So very, very cool layout there. We go from our quotes, we go to our images. Very spiffy kind of layout there.