Check out a free preview of the full CSS In-Depth, v2 course:
The "CSS Columns" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Columns allow the flow of text between multiple columns. Estelle covers properties including fill, gap, span, break, orphans, and widows.

Get Unlimited Access Now

Transcript from the "CSS Columns" Lesson

[00:00:02]
>> Estelle: So the best feature of being a web developer is to marry a chiropractor. I married a chiropractor it's wonderful. So if you're gonna be all day at a computer, totally marry a chiropractor.
>> [LAUGH]
>> Estelle: If you're already married switch spouses.
>> [LAUGH]
>> Estelle: I don't know okay but there are a lot of other awesome features of CSS so let's cover them.

[00:00:24] We already covered columns but I just wanted to cover it again a bit. Because there are some features that we didn't really focus on which is why no one ever uses them. So one of the things that columns does is right now there's margin on top of this paragraph.

[00:00:41] So here's the top of a paragraph and here on the other side is a paragraph as well, and this doesn't look good. So if you're going to use columns, you actually wanna get rid of the top margin, most likely, so that you can use it cuz this is ugly.

[00:00:56] Then we talked about column-count, and here we have three columns, and then here we have six. Or five, rather, when I said six. But here, we only have two columns, even though I declared six. Because the column-count is the max number of columns. And the column-width is the minimum width for each column.

[00:01:18] And then we have column-rule and column-gap. The column-gap is how much room between the two columns, total. So the properties are column-count and column-width. And we have a shorthand, which is columns, which declares the width and then the column-count. And count is misspelled up here so just ignore that.

[00:01:42] Then we have column-fill which takes two options either auto or balance. Which means if you have an element that is really, really tall and you have just a little bit of text, you can say, fill up the first column. And maybe don't fill up the second column at all, or maybe balance them so that both of them are the same height.

[00:02:04] Then you have column-gap which can just be default as normal, which I believe is 1em, or a length. Then you can have column-span, you can have an element go across many columns. Or rather all your columns, or just stay in its one column. Then you have column-rule which is kinda like a border.

[00:02:24] It takes a rule-color, rule-style, and rule-width and there's a shorthand of column-rule. Just realize, if you transition or you animate it, it will have two events when you do the shorthand instead of just one. And then there are other features that are not column specific. Such as break-after, break-before, break-inside, orphans, and widows.

[00:02:49] Orphans and windows are basically how many lines at the end you want to keep together before it can break. And so these are really page properties, not just column properties. So let's take a look at that column-span which we did not cover earlier. First of all, I'd like to say that here we're saying columns should be a min-width of 8ems and a max number of three columns.

[00:03:13] We could have five columns and that would fit. We can have a maximum five at that width, but we could go down to 4ems and basically have as many columns. You don't want this look, but it is possible. But notice that the first paragraph has that margin-top. So we should change that p to give it {margin: 0 0 20px }.

[00:03:41] So now its margins on the bottom and look how much better that looks. So you still have a margin on your paragraph but it's on the bottom not both on the bottom and top. Then we have another thing which is right here, h1 { column-span: all; }. And so you'll notice that this title goes all the way across, but that second title right here, which is an h2, stays in line.

[00:04:06] That doesn't look good. First of all, let's make this actually go back to 8ems, cuz that looks so much [NOISE], let's do 12ems. Okay, that looks better, right? But you have this showing up right here. And this really should span all of the columns, so you just do h2 {column-span: all;}.

[00:04:26] And the text that came after that h2 is down here.
>> Estelle: So { column-span: all } is something that I wanted to show you.