Columns

[00:00:00]
>> So we know about Flexbox and Grid. I would like, just in case you were not aware, introduce you to my good friend columns. Columns is great. Columns allows you to live the dream of the Tumblr era, where masonry layouts were all the rage. There's other practical ways that you could choose to use columns.

[00:00:24]
But also, you could also choose to make basing relayouts. And so columns is a shorthand property that we can use. There's a website called PlaceKitten, by the way, which if you need an image place. There was one called Phil Murray that had pictures of Bill Murray. That's no longer working.

[00:00:44]
Rest in peace Phil Murray. Long live PlaceKitten. And it's got a bunch of settings that you can use. We'll kind of look at it, we'll see the auto complete in this case as well for kind of laying out multi column data. Now this is also super useful for text, I guess, but also masonry layouts of kittens is also a thing that you can use it for.

[00:01:05]
But if you wanted to have two or three columns of text, you no longer need to do anything. You can just use this it will flow. And there are ways you can choose like how you want to break that data, so on and so forth. So let's open it up and take a look.

[00:01:19]
It is pretty straightforward. But really powerful if you need it. So you basically have two ways you can go about this in Tailwind. You can say how many columns you want, or you can say how wide a column should be. And then it can do math and figure out how many columns you're going to get.

[00:01:38]
Different reasons for each one, but we can try both. So we can say columns three, but if I wanted this to be columns two, boom, it's two columns now. And why I bring this up, right after we talk about responsive design break points, I think needs no explanation.

[00:01:55]
And so we can theoretically say columns, too. But I think if you're worried about the responsive design layout. I think there's a lot of times more apropos to think about the width of the columns. Where you get some of the breakpoints we saw before of the small, medium, large, extra large maybe.

[00:02:13]
You also get some new entrance. You get all the way up to three X, you get three XS, two XL. You go all the way up. You can have some big columns. You can have some pretty large columns. But it adds some smaller ones in there as well that are normal breakpoints that we see in some of the t shirt sizing.

[00:02:33]
Because four of these columns is a lot of time is useful to have something along those lines. So we can actually get rid of this max width here. But even the extra small is pretty large, 20 rems. That's still 80. And so, if you wanted an arbitrary value, you can absolutely put one in.

[00:02:52]
So we could do something, I don't know. Whatever you want, right, tiny little cat columns. You can also put in a gap of one and you'll see that the kind of gap in between the columns gets a lot smaller this is actually a little ridiculous on. That's also ridiculous.

[00:03:12]
But you can change the gap and stuff along those lines and get a lot of control over those columns. What is interesting is for pictures, you're gonna get that layout. And it will, it's, you gotta do a little bit of work there. There are some things you can do where we saw with an aspect ratio, which I think I have an example, if not, I'll whip one up.

[00:03:32]
I did make an example where you can also take advantage, as we saw before, of here I'm saying, actually, the max height is 32, and I'm using object dot cover. And you can kind of see what happens if I get rid of one of these. It's just how it's kind of, instead of getting stretched, we're saying crop it so it fits which is again another just easy, nice, useful one.

[00:03:56]
You can also, if I really wanted to, I'm gonna get rid of the max height for a second and we'll just grab all of these. There's only three aspect ratios that it gives you, auto, that's the default, square, and video. But you have those arbitrary values, you can extend the theme with whatever you want, right?

[00:04:19]
If you really want like four by three, or you really want 16 by nine, go for it, right? You can do all those things, you can add them in if you want. So here I can make them all squares and like they're not getting stretched or squeezed they are using object of, object cover to like fit in there and there are some tweaks of like do you want to center it?

[00:04:40]
Start from the top right stuff along those lines as well. I could also do was a video the other one, yeah, and then I'll get that kind of more like video shape.