Specification claims that with following instructions cited in it:
Content can be flowed into multiple columns with a gap and a rule between them.
What it means? Simply remember a magazine or a newspaper page, which is composed of columns. Text starts from the top of first column (left column in ltr languages and vice vera in rtl) and goes down, until it reaches the end of the first column. It then flows to the top of the second column, down to the bottom of the second column, then flows again to the top of the third column, and so on and so forth. As they say, a picture talks more than a thousand words:
The left image shows the content flow in left-to-right languages and the right image is for right-to-left languages.
To be able to use CSS Multicol, there is no need to write extra HTML at all. Multicol is completely a CSS stuff. In other words, by changing the style (CSS file) of a page, you can get multicol layout or remove it. Applying multicol to an HTML element tells the browser to show the content of that element in columns. For using multicol, you should learn some knew CSS properties and values (new declarations). The list of these declarations is presented here:
1
2
3
4
5
6
7
8
9
10
11
12
13
| column-width: 300px;column-count: 3;columns: 3;column-gap: 15px;column-rule: 1px solid red;column-rule-width: 1px;column-rule-style: solid;column-rule-color: red;column-fill: balance;column-span: all;break-before: column;break-inside: avoid-column;break-after: avoid-column; |
Let's now understand these properties in simple languaeg.
Consider that you want the footer of your site to have three columns. Using CSS3 and by assuming that your footer is an HTML div element, and that your site's width is 960 pixels, you can write:
1
2
3
4
| div#footer{ column-width: 300px;} |
Because footer div is 960px wide, using simple math we see that 3 columns with 300px width can be placed inside it. But the big problem of multi-column layout is to divide the space of the parent element equially. A stupid browser would render the footer as:
Therefore, column-width property only sets the minimum value for the column and browser would adjust the width of created columns according the the availabe space. In other words, column-width is not deterministic. So, when you set the width of your column to be 300px width, and you see columns with 320px width on the screen, don't get mad!
To have a good grasp of column-width property, imagine yourself as a browser. Someone has asked you to divide a space such that no division is shorter than a specified value. You first divide the width of the availabel space (here 960px) by the requested column width (here 300px) and you get number 3. So, up to here you know that 4 columns can't be placed there, and 2 columns are less than possible. Then you simply forget the specified value, and divide the available space (960px) by 3 and you get 320px. That's it. You draw 3 columns of 300px wide in the available space, though, columns with 300px width has been requested.
Up to here, we saw that we can determine the minimum-width of columns. But we had no control over the number of coulmns. Because sometimes our design is elastic and has no fixed width. Therefore if the user resize his or her browser, the available space would change, causing the number of columns to be increased or decreased. To explicitly define the number of columns, you use column-count property.
1
2
3
4
| div#footer{ column-count: 3;} |
This rule tells the browser to always draw 3 columns in the available space of the footer. So, no matter how much the available space is, the browser always divide it by 3 and draws 3 columns. Now even if you site's visitor resize the browser, columns count stay 3, but columns width change to accomadate the new space.
Like always, column-width and column-count can be replaced with a shorthand property:
1
2
3
4
| div#footer{ columns: 300px;} |
or,
1
2
3
4
| div#footer{ columns: 3;} |
Paddings; Consider column-gap to be something like padding that you apply manually to some adjacent elements (like menu items) to make'em get a little separated from each other. It's that simple. Column-gap is the length of space between the content of two adjacent columns. In other words, a column-gap of 10px is equivalent to two paddings of 5px.
Now that we have applied some padding or column-gap between columns, we might also want to draw a line in the middle of the gap to show that these columns are separated. This can be done using column-rule property. Column-rule is exactly like border property and is a shorthand property.
1
2
3
4
| div#footer{ column-rule: 1px solid blue;} |
If you break column-rule property into lengthier properties, you get:
1
2
3
4
5
6
| div#footer{ column-rule-width: 1px; column-rule-style: solid; column-rule-color: blue;} |
According to deductional language theory, column-rule is one of those NDconcepts and an MDT for it could be columns-midline. My suggestion is that W3C change the name of this property to columns-midline.
- One of the benefits of using CSS Multicol is that, columns count can vary depending on the size of the viewport (screen). This means that you can create your multicol design for high resolution desktop monitors and get sure that for small cell phone screens, the mobile browser uses less columns and reflows everything.
No comments:
Post a Comment