This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Use Cases: Columns" Lesson
[00:00:03]
>> Estelle: Okay, then we have columns.
>> Estelle: So the way columns work is you have column-count, count-width, column-rule, and column-gap. So here I've 1 column and the column-width is 10em's. And the column-rule is grey, and the column-gap is 2em's. So the reason that there's only a single column is because column-width is a minimum column-width.
[00:00:32] It won't break into 2 columns unless it's gonna be, it's basically a max column-count and a min column-width. So if I do 6 columns, it's only gonna go up to 2 columns because I said each column should be at least 10em's. So if I shrink this down then I can have 6.
[00:00:56] And my column-gap is 2 em's which is not possible because some of these words are just longer than they can be. So let's just bring this up to this, right? So there's 1 between here and here, and generally 1 before it hyphenates on the other side, right? I think this is meat yeah?
[00:01:24] And so the column-rule is the gray line in the middle. And the column-gap is how wide the gap is. So it's actually 2 em's total, it's 1 on each side, I think I said it was 2 em's on each side, it's 1 on each side.
>> Estelle: So columns might be a nice place to use media queries.
[00:01:42] Because you don't actually wanted to break into columns unless it's a certain width. Cuz what's the point? But columns you don't actually need media queries. Because when you do columns, 8em 3, right? That says, I want a maximum of 3 columns and or each column should be a minimum of 8em's.
[00:02:03] So if I did 18 em's, it would change 2 columns. Cuz what that line says is I want columns that are at least 18 em's wide but not more than 3 columns. So here it's saying to make it 18 wide, I can only have 2 columns.
>> Estelle: If I get rid of this, by the way this is also, I'm teaching you columns right now.
[00:02:28] We've kind of broken out of media queries and we're now into columns. So span, you can have column-span and it will allow an element to go across all the columns. And then it will restart the next set of columns. So if you have an h1 in the middle, it will basically break it, put an h1 across all of them, and then restart the text underneath it.
[00:02:54] So this is the column shorthand, here. We have basically, the column-count, column-width, column-rule and column-gap. Here we just have columns, and it has the column-width and the column-count. It's a shorthand.