Creating a Bento Grid

[00:00:00]
>> Kevin Powell: With that section done, we can move on down to the Bento Grid. I love Bento layouts, they're quite popular right now. This isn't the fanciest one in the world, but we also have to make a decision along the way. If we look at the design, we have the really small size where they're just stacked, nothing too fancy.

[00:00:15]
It's already working. And then we have the large size that we have now that looks something like this. We could also build in a middle-ground. This would be somewhere, again, if you're actually working with the designer a discussion with them cuz they didn't provide it for you, could be really useful.

[00:00:30]
But if you don't have anything in the middle then you just get to decide what to do. And we'll build in a simple little middle where it's two columns and then we'll go up to the three here. And so, to do that, this is where, again, I didn't wanna rely on the layout that we had.

[00:00:45]
Sorry, we'll come to here. I didn't wanna rely on the layout for the equal columns, just cuz so much of what we need to build is completely custom. And when you have layouts like this, where the elements sort of span across different amounts of rows or columns, we just need to be very specific with it.

[00:01:02]
A hundred percent, this is a grid based layout and not a Flexbox based layout. When I look at it, you could build this with Flexbox. We used to do the layouts like this with flexbox, but now that we have grid, it's a lot easier. With Flexbox you'd have extra nesting of divs just to create more columns, and it gets messy pretty quickly.

[00:01:19]
And then when you wanna rearrange things, you're quite limited in how you're able to do that. For this, you could say it's a layout, but I'm gonna put it as a component just because it's, again, this one specific use case that I probably wouldn't use anywhere else. If you had different Bento layouts, well, each Bento layout would probably be a bit different.

[00:01:37]
And so, I'm just gonna do it in my components. So let's go look for that layer, and I'm gonna do it sort of close to my hero area, again, just because the hero, the mushroom guide, I'm gonna to plug it right here. And we need a name for it, cuz it's a very unique layout.

[00:01:58]
My faq queue is right here. So I did the wrapper, and then I put all my cards in there. So I will come right here after my wrapper. We could call it faq-bento. You could just call it faq, faq-grid, a name that makes sense to you. You might be wondering why I'm saying bento.

[00:02:16]
It's just the name that people give this type of layout cuz it looks like those bento boxes you can get for food, where they have these types of shapes in them. So if you look up bento layout for inspiration or design or anything, if you wanna build a layout like this.

[00:02:29]
If you look at bento, you'll see all sorts of awesome layouts that use this sort of mixed spanning grid thing. So I can put that at the very top. Shrink all my cards down so they're not getting in my way. And then after that last card, close that div.

[00:02:45]
So I have the bento grid, and then I have these four coming in there. If we go back to my styles, .faq-bento, and we can come up with something fun here. And this is, again, talking about the utility classes versus components that are reusable, versus just one off things.

[00:03:05]
This is definitely like, I wouldn't wanna have to build something like this with the utility class, I find it just doesn't work. We know that it needs to be grid cuz I said so. [LAUGH] So we're gonna do a grid with a gap on there. And I can see if it's working just cuz I should get my gap in between them.

[00:03:20]
And again, don't be scared of doing a really big number just so you can see that it's actually working. And it's small screen sizes, we're done, that's it. Now we wanna come in with larger screen sizes. And up until now we've been using the media query of 760, so we'll start there.

[00:03:36]
But I have a feeling that we might need to change this. But we'll just say the width is greater than 760. And we want to come in with a more complicated grid now. So we can add some columns. Let's do grid-template-columns;, or let's do the biggest one, because we know what that's gonna be.

[00:03:55]
And then we can fill in the middle-ground after actually, cuz I think that makes more sense. At the large screen size we need three columns, is the way I see it. It can be sometimes hard to know, this one's not too complicated. Sometimes you'll need six columns to be able to do what the grid looks like.

[00:04:11]
My suggestion is, anywhere you see a gap, just draw a straight line going through. So I see I have two vertical gaps, so I know I need three columns. I'm also gonna need two rows. I tend not to declare grid template rows unless I really need them. So we'll see if we can get away without it this time around.

[00:04:29]
So we can say repeat(3, 1fr); cuz I know I want three columns. And that means when we hit that break point we get our three columns coming in. Awesome, it's a good start. We obviously need to make the layout look a lot better. And when we have layouts like this that have very specific areas for things to be.

[00:04:50]
When we're using grid there's a couple of different ways you can work. If you've played around with grid much you'll probably know about using grid column line numbers, I like them, they're fine. But when you have these different pieces that sort of need to be rearranged multiple times from a small screen size to a medium screen size to a larger screen size.

[00:05:09]
Having to select every one of the children, every time that happens can be a little bit annoying. If you use grid-template-areas, you can control most of the layout changes that are happening without touching the children at all and just manipulating everything here on the faq-bento. So even at the small screen sizes, I'm gonna do a grid-template-areas:.

[00:05:34]
This is one of those weird CSS things where I'm gonna do it on a separate line. But I'm gonna write "card-one". And it's weird because it's in quotation marks, and I don't know why they decided to do the quotation marks the way they did. It works well, but it's this other thing with grid that's different from anywhere else you would do things.

[00:05:55]
"Card-three" and a "card-four". And what this is basically doing is saying, I'm gonna have one, two, three, four rows. The top row is gonna have the name of card-one, the second row is gonna have a name of card-two, the third row is card-three, the fourth row is card-four.

[00:06:12]
Then what I can do here, when I have this larger screen size and I have three columns, well, I can come and look at that. I can say, you're just drawing it out, basically. So grid-template-areas, once again, I like being on a separate line once again. But now this is where it gets a little bit different, cuz I say "card-one", is gonna go in my first column.

[00:06:39]
In my second column, but in the same row I need the card-two, so card-two. It's all within the same set of quotation marks, but with a space between them to differentiate that by being in the same quotation marks it's saying it's the same row. But now I'm defining two different column names there, and then we need this third one over here.

[00:06:57]
For that third one, before we decide which card that is, let's go look at the smaller layout. Cuz that's actually my fourth card that's all the way at the bottom, according to how we wrote our HTML, cuz our HTML followed this layout that's right here. So that means here, whoops, let's go find the layout again.

[00:07:18]
Here this is actually card-four, so I can come here and write card-four. And then we can come down onto another line, put another set of quotation marks, and now I'm working on this second row that's down here at the bottom. We have card-three, and then we have the second column.

[00:07:38]
The second column also needs the same card in there. So I can just say card-three again. And then we're in the last column, we have card-four at the top. I want card-four also to go all the way to the bottom, so I just write card-four. You're just basically drawing it out the best way you can.

[00:07:53]
If you wanna add extra spaces in here to line things up, just so it's really obvious how it's working you can do that. But when you save it prettier we'll probably remove that extra spacing that you've put. The extra spaces won't cause any difference or anything like that, but just so you can sort of visualize a little bit more of what your grid's actually looking like.

[00:08:12]
So if I, prettier didn't take it away when I hit save, so it keeps the formatting kind of nice there.
>> Speaker 2: These names you're picking for the grid areas aren't related to the HTML at all, right, you're making these names up?
>> Kevin Powell: Yeah, yeah, it won't impact classes, it has no connection at all to anything I've done.

[00:08:29]
You can call them anything you want, you could probably just do them one, two, three four if you wanted to. Any name you want for this, they're made up names that I'm just deciding cuz it's easy to reference. But come up with different names if you'd like to definitely.

[00:08:45]
Now, when you do that, it feels like something should have happened, but if we go take a look, nothing really will have happened yet. We're still getting everything just looking the same way it was before, cuz the browser doesn't know what to really do with them. There's probably actually extra columns and stuff being created.

[00:09:00]
Now it's gonna be kind of weird, cuz these cards haven't been assigned to anything. So we actually have to assign each card to one of these grid areas. We could give each card a class to be able to do that, and that would be fine. But whenever I do a layout like this, I always wanna think of like, what if I took one of these out and added like a new thing in there?

[00:09:20]
Or what if I just wanted to switch the position of two cards? So they come back and they go, actually, Kevin, we'd really like this one here to go here and we're just gonna shuffle them all in a different order. I don't wanna have to move them in the HTML and then remember which class names they all need to have.

[00:09:36]
So this is one of the few cases where I think the best option is actually using nth-child. So that way, whatever order they are, inside there, they're just gonna get positioned into the right place, and it becomes very easy to do. So in here, I'm gonna do an :nth-child(1).

[00:09:56]
Oops, gets a grid-area:. And this is where it's kind of weird, cuz you don't use quotation marks anymore. You just write grid-area: one. Up here is plural cuz we're defining multiple areas. We're creating the template of all the different areas, over here is just grid-area singular cuz we're assigning it to one of those areas.

[00:10:18]
And then, as you might guess two, three, four, 2, 3, 4, and one, two, three, four.
>> Kevin Powell: And now each one of them has been assigned based on the order that they are, and if I did that properly we should see, there we go, our layout is sort of coming together.

[00:10:48]
There's some issues with it, granted, but at least everything is going where I expected it to. So these two first ones just sit in the top one. This one stretches all the way down, and then this other one's living over here. We do need to adjust the layout of this one, we'll do that in a minute.

[00:11:02]
For now, I'm pretty happy that we actually got that layout coming together. And one thing I just wanna reiterate with this is now that these have been assigned their areas, I can do whatever I want where I'm declaring the different areas. And the cards are just gonna lever I want to.

[00:11:17]
I don't have to reselect any of those, I just have to redefine the areas here. So really fast if we came in and said we'll just come in with another one. And we could change the breakpoints here, but let's just say (500 width > 500px). I could do a grid-template-areas:.

[00:11:40]
Of, whoops, there we go. And we're not gonna keep this this way, but say we did "card-four card-one" and then we did a "card-three card-two" or something like that. It just means they're gonna go to those positions at that size. They've been assigned to the areas, I can do as much as I want with the areas on the parent now, and everything's just gonna fall into place every time.

[00:12:12]
It can be easy to over-rely on these types of situations a little bit. I've even done it where I've gone a bit overboard on using grid template areas cuz it feels like this magic formula that just works all the time, and sometimes there's simpler ways. But when you do have a layout, the content is not really changing, but it needs the different pieces just get re-manipulated, or manipulated depending on the screen size.

[00:12:33]
Then I find grid-template-areas are the easiest way to do it. Now, as far as the break points go, I did say, do you wanna have a two column version of it? If we go to, let's click there just so we're looking at the browser. Once again, I sort of magic numbered it.

[00:12:48]
[LAUGH] In a sense, if I'm looking here, these look really narrow to me. They're getting kinda squished and kinda way too small. So I'll probably make that brick point bigger. And it's one of those things it takes, again, either talk with your designer and find what works with them.

[00:13:04]
Or you just sort of find the point when you feel the break point makes the most sense. And right around there to me it looks pretty good. So I'm gonna go with a 600 for that one. And then as we get bigger, as we get bigger, that's probably happening too early as well, that's kind of narrow.

[00:13:20]
I'd probably do that at a bit of a wider size, so we could do 800 or 900 and play around with it a little bit. So looks a lot better at the 900 for me. The one thing I've done right now is I've added two break points to my design that we didn't have before.

[00:13:36]
I was using 760 for everything. This one time I'm using something a bit different, and I said having consistency is really important. I still stand by that, but you're gonna run into situations where a layout doesn't work at certain sizes. So the one thing I would say is, if I had a breakpoint that was 630 pixels, I would stick with my 630 here and I wouldn't come up with a 600.

[00:13:55]
I don't wanna have something changing at 605, another one at 626, and really specific numbers that you're coming in with the breakpoints. So now maybe I have three generic breakpoints in my project, 600, the 760, and the 900. And those become the main ones that I'm focused on going forward.

[00:14:11]
So if I feel like the 760 doesn't work, I know I could use one or the other. Another thing that we need to do is fix our titles and we need to fix the layout down here. And actually let's just do this. This should just be a one, two, three and a four, so I'll fix that right away.

[00:14:27]
For this one, if you didn't do it with the grid template areas, you could also just do grid template columns cuz they're in the correct order, so it is an option there as well. When you're creating grid-template-areas, if you haven't declared any grid-template-columns, like I haven't done any here, it's still creating two columns.

[00:14:44]
This is just implicitly creating them, cuz I'm telling it there should be two columns through these grid-template-areas. There's the potential that maybe they're a little bit of a different size. There's no harm in also having the grid template columns. So we can do the repeat(2, 1fr) there. It's definitely not required, you don't have to do it.

[00:15:05]
If you like having that explicit declaration there you can definitely have it. But if you just put this and it's working, you can decide you don't really wanna do that. But let's go fix those titles, and we can do the titles in the exact same way that we did it for the previous section.

[00:15:21]
We're looking at the parent. We had those card titles that we can manipulate. So we can say that our card, I think the only thing --card-title-font, no, color, the font size is, I believe, the right one. And then we can do our var(--text-high-contrast). And in doing that, let's,
>> Kevin Powell: There we go, the right one has come through now.

[00:15:47]
I forgot my semicolon before that and it broke everything. But having that there, we can see it's coming through with the right font color on those and it's looking pretty good.