Fine-Tuning the Bento Grid

[00:00:00]
>> Kevin Powell: I think I missed my title, so we'll add that in a minute. But we can also now look at fixing a few other things here. This is stretching really far down. This is another thing that happens where the layout of one part of it is impacting the layout of the other parts, because things stretch by default.

[00:00:16]
And we need the images positioning to be changed a little bit as well but this one here, because the content is all stacked, and if we come look here, we have two columns. This one is a lot taller than what it should actually be if we were following the correct layout.

[00:00:30]
What I would suggest always is get the general layout working in that everything's in the right place. Then, before you start worrying about why isn't the height matching or why is there so much empty space go on like a more micro level of looking at each one of the different pieces.

[00:00:45]
And trying to fix those so the layouts are correct, just because those have such a big impact on how the layout is working in general. And then you do the finishing touches after that. Then we can get our images in the right order. We can get the heights of the images to be correct and fill in the empty spaces that we have.

[00:00:58]
And it just gets a little bit easier to work that way. So in this case, this is my third card, because we did one two three four, because it's my third card. And I want this to be as composed like throw anything you want in there as possible.

[00:01:17]
I'm gonna stick with what we did. Down here, where, with my nth child, we could include this either within this media query, or we could just come in. And if you prefer keeping it with the selector for where it working, we could put our media query right here.

[00:01:35]
And in this case, this one needs a very specific layout, and I'm gonna zoom out just so we get to. The layout that we need because we need the image on one side and the text on the other side. We could do this with Flexbox or with Grid.

[00:01:49]
My mind immediately goes to Grid for this type of thing again, because I wanna be able to move the cards around and just have the layout work. And if we wanted to create that two column look with fa using Flexbox. That would mean we'd have to come into our card and add an extra div so Flexbox could actually properly separate the image plus the text.

[00:02:08]
Whereas with grid, you have a lot more control over just positioning things where you want them to be. So when we're in this media query, we could come in and say, this is now a display grid. It was, if you remember, we switched them to Flexbox before. So I do need to say that it's actually grid and then I could do my grid template columns of.

[00:02:27]
Let's start with two equal columns. It's not gonna be exact, a lot of gap there as well. I feel like I have something wrong in my HTML that's causing a problem right now. But we'll fix that. But we're getting our two columns that are coming in there. Actually, I'm very curious 1, 2, 3, image, H3 paragraph curious.

[00:02:55]
We'll see what happens once I set this up a little bit more because what I want to do in this case is just to make sure that my image is going into the right spot. And it could just be that there's not enough room cuz of the way I'm zoomed.

[00:03:07]
>> Kevin Powell: It's really bizarre, but we'll see what happens here.
>> Kevin Powell: So in here, I'm gonna select the image that's nested inside that card, and we can say that this is a grid called column of 1 over 2. And this is the line numbers. And we can take a look if you don't know how the line numbers work in the grid, always just turn on your inspector.

[00:03:30]
And so if I come down here on that element and I find the little grid thing, I can turn that on. You can actually see the line numbers coming in. So I have line number one, line number two, line number three. So I want the image to go from one to two, so the image, it's sort of disappeared, but let's go and fix the other one now.

[00:03:50]
So then we have our grid row. I'm gonna inspect this in a minute too to see what's going on. But we're gonna say grid row, and I want to go from 1 over 3. So just to explain why I know it went wrong. When I turned on my grid inspector here and I clicked on the grid for the card, when I looked at it, there's a whole bunch of these gaps showing up here, and I was kind of weird because.

[00:04:19]
Because of the way the columns were shifting over too. And I was like, Well, it's weird. It's starting over here, and then I'm seeing all these columns and I was like, Wait, I did something wrong to create those. And what I realized was, I'm using the nth child selectors here, which is awesome.

[00:04:33]
They work really well, but I did it as a general descendant, so it's not only looking for the card that's in nth child. It's then going into the nth child and getting the third nth child here as well. So we're getting it for the first, the second, the third for the cards and anything nested inside of those.

[00:04:51]
So what I should have done is either done. Let me just see what the initial selector was. So yeah, I could've either done .card to specify it's only for the cards that are that, and that's probably the safer option. Or I could've done the direct sibling combinator. So if I had the direct sibling combinator, it's only gonna choose the first one.

[00:05:13]
I think it's a bit safer if we do it. Well, it's not safer, but a bit more explicit to use the .card on there, and that will solve any weird things that are happening. There we go. We can see the image is in the right spot now, awesome.

[00:05:31]
And I'm only declaring for the image, and I did my grid column here from one to two, because I wanted to go from one to two and then vertically I want it. If I did 1 to 2, it would just match the height of the heading, which I don't want it to only match the height of the heading.

[00:05:47]
I wanted to go from the top and stretch across two columns. So I'm doing a line of grid, row one over three, so it covers two different rows and covers that whole space. You'll notice the height of them isn't exactly what we want, but at least it's getting us in the right direction.

[00:06:05]
I'm gonna come up a little bit and just do a general card image and give them all a height of 100%.
>> Kevin Powell: And it's gonna cause all of the images to stretch and fill in the empty space. They look terrible right now, but that's okay. You can't always do 100% on things if you know CSS, height 100% is one of those really annoying things that doesn't work whenever you want it to work.

[00:06:30]
But if the parent is either a grid or flex item, height 100% will work. It's in this case, with grid, it's the best place to use it, because that 100% is actually according to the grid cell that it lives inside of. So if I turn those off, and we can turn on these flex that's a bit different with the Flex, because we're using it there too flex, it just fills the available space, basically.

[00:06:53]
But here where this is covering two there's all that empty space underneath. So when I do the 100% on there, it's filling up the height of those two cells. So 100% can be really useful in grid contexts. We're stretching the image. Stretching it makes it really distorted. CSS has a solution with object-fit cover, object-fit cover will stretch the element not stretch them.

[00:07:19]
Object-fit cover will crop the elements. So if I turn that off, you can see that there's a lot more background on the left and the right of this. We're gonna crop. You lose top, you lose stuff on the side, it's the trade off of using it, but it also happens to match the design of what we're trying to create right now.

[00:07:38]
Anyway, where we have the layout is shifting a little bit, we have to crop the image to make it work anyway. There is also, in this situation, the default it's a lot like a background size of cover. The difference with object fit and background size, the background size, or, sorry, the background size over, the position of it is always gonna start in the top left.

[00:08:03]
With object-fit, it's always based on the center of the image. So it's gonna keep the center of the image and crop it. If you did need to change it, you could come in with an object position of like top left and then position
>> Kevin Powell: Spelling is hard. There you go.

[00:08:23]
And then I'm getting the top left, which I don't want, but you can change the position of how the cropping is happening if ever you need to. But like that, there we go. You can see, once I close my dev tools there, I'm zoomed out a lot right now, just so we're getting this version of the layout, but we can see it's coming together pretty nicely at this point.

[00:08:44]
Or actually, one second, sorry. The only thing that's different right now is the ordering of the images. This one's down at the bottom here. So we go top, bottom, top, and this one has its own spot. When we're at the smallest to screen size. Right now, they're just always at the top.

[00:09:02]
So we can leave those ones alone. We don't have to worry about it. But just to make life a little bit more interesting and to come in with another fun selector. If I come to here and we go to that middle size as well, or I'll zoom back in a bit.

[00:09:18]
When we get to two columns here. It's kind of boring if the images are always at the top. Just we have this type of layout, we want a little bit of movement. So inside, of the 600 media query, or if you have another one for your card images.

[00:09:32]
I'll do it here actually just because we have our card image selector, so just just keep all of those in one spot. Card image, I'm gonna do the ampersand inf child, no, whoops. We want the media query first at media. I'll do this outside of nesting, because it's gonna be easier to understand actually.

[00:09:54]
Let's do an app. Media is geater than, this would be the other media query, 600 pixels.
>> Kevin Powell: So now that we're in that media query, what I can do is select my cards that are an nth child of, I want the second one. So let's just shrink that down.

[00:10:14]
I want this one here and this one here. So that's my second and fourth one. So if the nth child is even, I wanna select the image that's inside of it and change the order of that image, and now the image goes to the third so it goes all the way at the end.

[00:10:32]
And this one does as well. This is something you probably won't do very often, but it's one of those fun little things that you can throw on there. The one thing to be careful with is when you are changing the order of things, be really careful this is what you wanna do.

[00:10:46]
And this doesn't only apply to using the order property, it also applies to when you're using grid template areas to rearrange different things within a layout. And that's because the order that matters is the order that we have in the HTML. If something's going through that, this is what they're seeing.

[00:11:02]
And then we're visually moving things around, and that can have an impact on things. If you have cards that you're moving around within a bento grid like this, but there's a tab there's a focusable element in there that you're tabbing to. And you change the order, and the person's tabbing through them.

[00:11:17]
And the order of the tabbing doesn't make any sense. It's a really strange user experience. There's really big websites out there that have done this where you're hitting tab and it's going, like three quarters of the way back up the page. Because they've messed around with the tabbing order of things.

[00:11:30]
So if you have focusable elements, be very careful and do lots of testing if the order has changed. I'm very liberal with moving an image up and down or moving a heading somewhere else, but always do it the correct way in the HTML, the way that it should be logically.

[00:11:45]
And then if you need to tweak it for whatever reason, you can move things around. But just remember it's only a visual movement. And always test things to make sure that it makes sense the order that you've put them in.
>> Kevin Powell: Any questions about this or anything there?

[00:12:04]
>> Speaker 2: Do you have any best practices around how big the scroll is on mobile devices when you have a lot of cards and things ended up stacking?
>> Kevin Powell: Just like how far it's going?
>> Speaker 2: Yeah, even just maybe from a design choice or perspective or just a rule of thumb for how far you want users to have to scroll.

[00:12:23]
>> Kevin Powell: I think the people are so used to scrolling now it can be, I will say if you get to this type of not so much where our bento grid is here, but if we get to the other one. Let me just make it one column, this one here, if it was one column.

[00:12:39]
It is kind of long, but to me, in a way, a user, I'm guessing, would use the filters, hopefully, if there's too many of them, they might not get to the content after it, if it's a little bit ridiculous. But even especially now with shorts or Instagram, everything on mobile now is swipe, swipe, swipe, swipe.

[00:12:59]
You could come in with horizontal scrolling, instead it's one option, just you're swiping the other way. On mobile, that experience can be really good because people are used to it now. But then it's super awkward if someone's on a narrow screen on desktop, like you shrink your window off to the side and you're going through and using a mouse.

[00:13:16]
And then if you don't have a touch device, it's really awkward because you're like, shift scrolling, or you have to grab the scroll bar. So it's definitely one of those things that you have to balance out a little bit, yeah,
>> Kevin Powell: User testing as usual. [LAUGH] So one of those things that comes into it as well, but that's the expensive part that nobody can afford.