Creating Columns

[00:00:00]
>> Kevin Powell: Okay, now is one of the parts of this that I was looking forward to the most, which is talking about creating columns. And we have these areas in our design. We have these different sections. We have one area that needs to have three columns and then another area that needs to have two columns, not looking at the mobile design now, just because I know the mobile stacks.

[00:00:19]
So I don't have to stress about it bit too much there, it's going to work. We don't have to look at it. We will take a mobile first approach to getting it to work, though. But what I need to decide is how do I need these columns to actually come together and work?

[00:00:33]
Because there's so many different approaches you can take to creating these the one thing that's really, really important here is content shouldn't matter. When you're looking at what goes inside the columns, that should have no impact on anything. You should have something that's creating your layout. There's a class that's saying there are columns here, and then you can plug and play any content into there, and they'll live in those columns, and those columns will work.

[00:00:56]
Ideally, that's what we're doing, because then those columns that you've created are reusable any content. You're putting in them is reusable, and you can reuse those throughout your entire site, which is generally the goal. And even in this case, if we look at the layout, over here, we have two columns, and over here we have two columns, and they're actually in different wrappers.

[00:01:14]
This wrapper is the regular one, whereas down here it's the wider one. We shouldn't have to worry about that either. The wrappers handling the wrapper thing, the columns is handling the columns thing, and then we are just throwing whatever content we need to be going in the there.

[00:01:29]
So each piece has its own job along the way.
>> Kevin Powell: When we have different numbers of columns, there's different ways that we can do things, right? So if you did a display of flex on something to create colums, its flexbox This is nice, it just creates columns. We could do that, and then every single child will be a column.

[00:01:45]
We just saw that with our navigation. Throw display flex on it, each one goes next to each other. We could do it with grid as well in a bit more of an explicit way cuz maybe you just want three columns. So in a sense, this could be easier to do with grid than it would be with Flexbox.

[00:02:00]
Because with Flexbox, you'd have to select the parent and the children to set the right size on the children to get it to always be three columns. So in a situation like this, you might say that this should always be three columns. Or maybe if I only had two, it should be two, or if I had four, it should be four.

[00:02:16]
And it depends a little bit. It's a little bit ambiguous in this situation. And if I added another card here, if I'd want it to go down here, and if I added another one and it goes here, or you get six and they all go next to each other, then I know that it would be three columns.

[00:02:29]
In this case, we just have a decision to make. Which approach do we want? Should it just be generic columns? Should it always be three columns? It depends on how you see it, how you envision it, and I don't think. There's a wrong answer. It's just different approaches and different things that you can throw at it that are going to get the job done.

[00:02:48]
Another option that you can use is something where this is the flex version and this version are actually very similar to each other, using grid, but changing the auto flow to column. Just means it's using grid instead of Flexbox, but everything will be a column. You'll run into the same type of overflow issues, but there's no wrapping.

[00:03:06]
So it doesn't necessarily mean you'd wanna do this, but it's another option that you could have. There's looking at these. There's different options. We have Flexbox and grid, because we have two layout tools, and two layout tools is always a fun thing to explain to people of why we need two of them, but each one is really good at certain things.

[00:03:25]
And we do want to try and lean into these strengths of each one. And I tend to be someone that uses grid a lot more than I use Flexbox. Flexbox is fantastic at things like the navigation that we just created. Because each one of these columns, they're technically columns, even though it's just text, each one of those needs to be a different width.

[00:03:47]
This one's really small, this one's a lot bigger, and this one's in between. Flexbox just does that. With grid you could replicate that, but it's a pain in the butt to do it, cuz by default you sort of wanna play with pre-defined Column sizes. The nice thing with Grid, is Grid works in a way where the parent is in complete control of what's happening.

[00:04:06]
It doesn't matter what the content is, you're defining the columns, and then the content is just living in that. So for most layouts, even though it's things where it's one dimensional instead of two, like Flexbox, we just saw when we were wrapping It was creating two-dimensional layouts. Both of them can do one and two-dimensional layouts.

[00:04:25]
So I tend to, for evenly sized columns where I know it's set and forget, I tend to use grid instead of using flexbox. But there's not really, especially with the layouts we were looking at today, there's not a wrong choice between the two of them. You could Use either one and how we're setting things up.

[00:04:41]
So once again, I'll let you decide on which one you'd want to use. I did mention a few times now I've been glossing over the break points. We do need to decide on a break point now as well, and this is the big time where the break points probably kind of important.

[00:04:54]
And it's not always easy to know when things should be breaking but we'll look and show you my tricks once we actually get the layout coming together a little bit. And as far as the other things, also with the gap, I like using custom properties for that just like we've been using up until now, just to easily be able to adjust the gap.

[00:05:12]
You will see one difference in the example I gave here with the custom property versus the other locally scoped ones, and I'll why I like doing it this way, as we go through things. And this is generally what we see now, is actually the approach that I tend to like.

[00:05:28]
So I'm going to leave my components now, because this is something that is, again, a reusable layout that I want to use. And just because I want to write less code, I see this even though we have two columns in one area and three columns somewhere else. I always like seeing if I'm able to do it with one class, and then if I run into problems with it and I feel like I'm over engineering things, or I'm banging my head against the wall, or there's too much friction.

[00:05:50]
Okay, then I'll just create another class and I'll do it in a simpler way. But for what I'm going to do here is say I wanted the we'll call it equal columns, because that's what. What we want doesn't matter how many there are, so equal columns. Just so we know we're creating equal columns.

[00:06:09]
And as I said, I'm gonna use a display of grid and the gap. I'm gonna do a VAR grid gap. No, sorry, equal columns gap. There's a reason I named these like this, which is when you have locally scoped custom properties. If you give them too generic of a name, f I just called this gap, I might have something somewhere else that's in a flex thing somewhere else, or different contexts.

[00:06:36]
You might have different custom properties you're using. And if they're very generic names, you could run into naming conflicts with them really easily. So I like being really explicit with the name of the custom property just so I don't run into conflicts along the way. And then, if I just do that, we're gonna leave it like this.

[00:06:53]
We're docking mobile first. So, if I just do equal columns and I leave it like that, we have all of these elements here Those three columns that we want? So if I come and find those after my hero, go find that comment, three columns. I had that div waiting for a class, I can say that that is equal columns.

[00:07:14]
We don't have columns yet, but it's going to add that little space there. Let's take the s off. Space goes away. Add the s the space comes in because of the gap I have on my grid. And now I need to decide when my screen gets bigger. At what poin should it turn from being stacked content like it is now into three columns.

[00:07:35]
And usually the way I decide this is, first of all, I look to have as few break points as possible. So, we already have that 760 we've been using everywhere. I'm gonna use a different one for now just for demo purposes, but we'll find one that works for everything.

[00:07:49]
And I'm gonna do an app media. We're going to make it really small for now. So I'll say width greater than 500 pixels and I'm gonna do grid auto Flow of column and grid auto. All right, we'll leave this one off for a minute, just so I can show you what the purpose of that one is actually.

[00:08:12]
So now you can see we get my three columns coming in. So as the page is smaller, we can see that we're getting these really narrow. Columns like this doesn't really look good. They're like, this is where my break point is right now. And it looks kind of at this stage, they're just getting too squished.

[00:08:29]
And this is a subjective thing, where, if I came in and I said, this is now gonna be 900 instead, and now I start making this bigger. Whoops, let's highlight this so it's changing there. Yeah, and it's getting bigger. And now, when I look at it at 900 before that break point comes in, they're way too wide.

[00:08:48]
I need columns at this point. This shouldn't be taking up as much space as it's getting to super subjective definitely right now. But it's one of those things where you find something where, visually, it tends to work. You play around with it, and it's sort of why I picked that 760 from the beginning, because it's sort of where things on this design.

[00:09:11]
Maybe we could go a little bit smaller, but that looks like a pretty good minimum column size to me, that's sort of what I try and break layout break points around. This 760 does not need to match the 760 here necessarily, you could have different ones, but I find if things start changing at different times.

[00:09:28]
When you're doing your testing and you're checking different sizes, you end up creating more different, like there's a mix of different changes happening at different times. It just becomes a little bit harder to keep track of everything that's going on. Sometimes you'll definitely need to have more specific numbers if you don't know what to go with, this is literally how I do it.

[00:09:47]
I eyeball it until I think it looks okay, which might seem a little bit bizarre, but it's just what I do. There are the common breakpoints that are out there, so tailwind has them, bootstrap has them. People like going and looking at what they're using. Those are fine, they're very generic, but they work in generic projects.

[00:10:04]
You could start with those as starting places, but just don't feel like you need to use all of them. A lot of projects need one or two break points they don't need five. So limiting the ones that you're using just makes your life easier, because then you have less maintenance.

[00:10:19]
If you're not changing things over and over again, sometimes you need more, if you need more, you add them in. But if you don't need to have them, I would suggest not stressing about it too much.
>> Kevin Powell: I did mention that we want one more property on this, so if I come and take a look here, these are Look the same.

[00:10:39]
They might actually be, but I don't think they are. So if I open my dev tools and I look at these three columns right now, if I take the little inspector guy and I look at the size here, I see it's 227.11 pixels wide, 232.36, and 236.53, so they're all very similar.

[00:10:57]
Someone might not notice that they're different but each column actually is a little bit different from the other, and it's because of the content inside of them isn't identical. If you had the exact same content, you would get the exact same spacing. Flexbox is exactly the same way, if you throw a display flex, they might look very similar to one another.

[00:11:12]
They're not going to be, which is why often with flexbox, if you're doing this type of thing, or if you decide to go with a flexbox approach instead. Let's just say flex equal columns and you do a display flex often what you actually need to do is then select all the direct children and do a flex one, that's one of the options that you can do.

[00:11:37]
The reason this works is because flex one sets the same width on all of the children. So you're just saying all the children have it's kind of, I think it's all with zero, and then the grow comes on it but the key for that working is you're telling all the flex children they're the same size.

[00:11:52]
So then when they go into their columns, they actually end up being equally spaced, completely fine. You'd also want a media query to switch your flex direction, or I can come on this one and do a grid auto columns of one fr. So I'm just saying all of the columns are the same size and we can get rid of all this.

[00:12:15]
I'll leave it there just for reference if anyone's doing a flexbox version of And now if I come take a look at these three columns, 232 and 232, they're all the same size now. Using either flexbox or grid, if these columns get too small, it will adapt because if it's really getting crunched down, it's gonna look at the content, it's gonna try and prevent overflows.

[00:12:40]
And so then there can be discrepancies still, but it's only if you're really crunching those columns down at regular sizes, you shouldn't run into any issues or any inconsistencies. The reason that I do like using grid over flexbox is just, I like controlling everything through the parent rather than having to do stuff on the parent.

[00:12:58]
And then have to go on the children and play around with them in a layout like this, I wouldn't say one is better than the other. Just go with the one that you think is the more if you're used to using flexbox and it's the more natural choice for you.

[00:13:11]
In a layout like this, you just switch the flex direction, or we change the grid auto flow from going from column to grid, yeah, they both work quite well. Now I did mention the gap that's on here, and one of the reasons I talked about the gap being here and wanting to have it as a custom property.

[00:13:28]
Is because if I come on this, and I take a look here, I have a gap on those that I think it's 16, maybe it's a little bit bigger. And then if we come take a look at this one, it's a lot bigger, so Ideally, because I'm just creating equal columns, and in every situation here they're always equal.

[00:13:43]
Ideally I can just reuse this whether it's two columns or three columns. So if I take that and I come down here to this next section, which would be right there, two columns. I have my wrapper, so it would be on this div I can make two columns, and I should let's close the dev tools.

[00:14:02]
Hopefully we can get our break point right there, and I get my two columns coming in, but I need my gap to be bigger. So to get the gap to be bigger, the easiest way to do that is to modify the gap here so once again, we need a modifier.

[00:14:19]
Of some sort or you have a different class. Your two column class could just be the wider columns and your three column one could be narrower columns. It's up to you, but again, I like trying to come in and do it all with one. So I could just come here and say, data gap is equal to large.

[00:14:39]
And in the instructions too, there's an example with the data gap of zero, sometimes you might need no gap. So you can have a data gap of no gap or zero, or whatever you want. And then I could say, this is, oops, the equal column gap, goes to 2rem.

[00:15:01]
Let me just, well, sorry, I'll go to here and I'll add it, and then I'll make the code a bit bigger so we can see, or let's do it this way. Equal-columns, data-column-gap ="large", and we should see the gap change. Let's see if I did that correctly, is not defined so it falls back to there.

[00:15:26]
>> Speaker 2: I was like, is it just data gap and not data column yet?
>> Kevin Powell: Thank you.
>> Kevin Powell: Data gap and what did I do here?
>> Kevin Powell: Data, thank you. Data gap large should give us,
>> Kevin Powell: The larger one, which it still not doing. Data gap equals large equal columns.

[00:15:58]
Data gap is large.
>> Kevin Powell: --equal-columns, data-gap is large. One more thing, we'll double check. Columns and column, equal-columns, S, save, there we go. Consistency is key, I apologize for that. There we go, we can already see the gap is bigger this way and then when I get to the larger screen sizes, we get the larger gap coming in here.

[00:16:29]
And of course, I'm doing that at 2rem. So if I did that at 5rem instead, they get the bigger gap coming in.
>> Kevin Powell: This is one of the reasons that I like using data attributes. You just got to be good with the names of them. The other thing that comes in with these is we need one more modifier for them.

[00:16:51]
Because if we look here at the way they're centered, these two, they're vertically centered this way. If I were to change it on this one, we probably wouldn't actually see a change cuz all of them are gonna be equal heights anyway. But having the default to stretch is probably a good idea, but it does open up the possibility of having alternatives here.

[00:17:13]
So, I could come here and just come in. I like having it down here. And this is where you start creating these more robust components, where you can plug and play them and use the same thing in different ways and just modify how you're using it. So I could do an align-items of var, align, sorry, --equal-columns-aligment.

[00:17:43]
We could do a vertical, go on vertical, we'll do a really long. Vertical alignment, and let's just full screen it so we can see it all, --equal-columns-vertical-alignment. If we don't have one, it will be stretch as a default, which you don't actually have to put if you're leaving it like that.

[00:18:00]
And then I could create a data attribute or a modifier class, if you're using modifier classes, which is completely fine. And I could do a data alignment, doesn't have to be the same. We can keep that one shorter so it's easier. Or it could be vertical alignment, and we could say that one is centered.

[00:18:16]
And if I do that, and then that would just be my, let's copy and paste it. It'd be a little bit faster, cuz I made it really long.
>> Kevin Powell: Would be center like that. So now, if I want something that's vertically centered, it's easy enough to come on to here.

[00:18:38]
And this is where I again, sort of using the data attributes, cuz then data-alignment="centered". And then so when I look at this, I see I have equal columns. I see my gap is large, and I see my alignment is centered. It just sort of separates these different things that are happening.

[00:18:57]
And in that sense, I like how that works. So if we go and take a look, now we can right away see that image is coming in and it's being centered there as well. So, if we come down now to the next one, we have our two columns there, so I can come in with that class="equal-columns".

[00:19:21]
The data-gap="large", and the data-alignment="centered". And if I scroll down, I can see that's working on that one as well now. So these nice, quick wins as we're going through. And it just becomes this thing where I can use it to create equal columns anywhere I want instead of having any of three column here, two column here, five column here.

[00:19:47]
Sometimes you'll have all equal columns then you come up with a new class name. But as long as the breakpoint works, and as long as the alignment works, you can tweak the alignment actually. And I'm only doing this right now with my gap and with my alignment. But you might find as you're using these things, there's other pieces you wanna change.

[00:20:04]
And just by coming in and creating modifiers and doing it with the custom properties. It just creates this one encapsulated thing that becomes much more robust and reusable in different situations.