Columns Exercise

[00:00:00]
>> Your job is to play around with the number of columns or the size of columns and just get a feel for it. And we are accidentally going to stumble upon a problem that we will deal with as you solve this that we'll then like, it's called a segue.

[00:00:21]
We can play around with this a little bit, and what we can do is we can go ahead, and actually playing with the columns is not that hard. And the nice part is you can see how many you can have, like an egregious number. But the more interesting part is, actually 5 looks kinda cool.

[00:00:47]
The interesting part is the breaking of the columns. Now to be clear, if I was thinking about a newspaper, like a New York Times kinda thing, this is actually the effect that you would want, right? Especially maybe two, maybe three columns, and it's flowing text, that's actually what you would want but maybe not always, right?

[00:01:16]
So there are ways to handle this, and this is one of those things where, if this was one component, my life would be a lot easier. You think that I'm joking, it's in the docs, they have a GIF of multi-cursors. Now, luckily, I am very good at multi-cursors.

[00:01:36]
The only thing that makes me a 10x developer is 10 cursors at the same time. Actually in TextMate, which is this text editor that nobody uses anymore, I'm wicked fast at doing my insane stuff, very quickly for reasons that I don't totally understand. Cool, so there's a bunch of different options in here.

[00:01:55]
We can kinda take a look at what some of them are. And most of them seem pretty straightforward, I really wish that as I hovered over them, they would apply but, they do. Yeah, look at that, so we have break-before-column. They just take a second. So that one, which one do we want?

[00:02:29]
Auto is the default one. break-inside-avoid-column, we'll actually then be able to set it so that it doesn't actually break midway through the DOM node. The images didn't have this problem cuz there's no way that they can really break. Text had this problem, but depending on what you're trying to do, right?

[00:02:44]
So for instance, I a lot of times will use something like this. There was an earlier version of the course website that I was playing around with the layout. Where, was I gonna put these underneath in mobile or tablet view and then I wanted to play with the columns and stuff like that, but I didn't want them to break?

[00:03:05]
So if you want text, the normal behavior is what you want. But there are use cases where maybe you want them to stay as solid units and just kinda break at the next one. But whatever effect you're looking for, those are all options and some of them work with, as you saw before when we had the different media queries.

[00:03:26]
One of them was for print, stuff along those lines, you can kind of play with different things there as well. But it's a super nice easy layout thing, kinda like that space y and space x that we saw in the very beginning there, right? Before you start grabbing a grid or Flexbox, will one of these very simple classes, cuz they're actually wildly flexible unlike a lot more of the edge cases and some of the more powerful tools.

[00:03:51]
They don't do a lot but they kinda do the right thing most of the time. And they're pretty useful, they might solve your problem for you a lot faster as well. And the only thing I will warn you about, I could have said this a little bit earlier, is with that regex you just can't try to do anything fancy with string interpolation.

[00:04:11]
Because of the regex will never find it and those classes will be cut from your CSS bundle. You can do stuff but just don't get carried away. Just make sure you keep the full class name in there any given point.