Flash cards
Review the key moves
What is the main idea behind CSS Column Rules?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___-rule-style: solid;Put the learning moves in the order that makes the concept easiest to apply.
This page covers CSS column rules, span, and width properties.
CSS Column Rule
The CSS column-rule-style property specifies the style of the vertical rule between columns:
Example
div {
column-rule-style: solid;
}Live preview
The CSS column-rule-width property specifies the width of the vertical rule between columns:
Example
div {
column-rule-width: 1px;
}Live preview
The CSS column-rule-color property specifies the color of the vertical rule between columns:
Example
div {
column-rule-color: lightblue;
}Live preview
The CSS column-rule property is a shorthand property for setting all the column-rule-* properties above.
Example
div {
column-rule: 1px solid lightblue;
}Live preview
CSS Column Span
The CSS column-span property specifies how many columns an element (typically a heading) should span across.
Example
h2 {
column-span: all;
text-align: center;
}Live preview
CSS Column Width
The CSS column-width property specifies a suggested, optimal width for each column.
Here, the browser will determine the number of columns based on this width and the available space.
Example
div {
column-width: 100px;
}Live preview
CSS Multi-columns Properties
The following table lists all the multi-columns properties:
| Property | Description |
|---|---|
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | Specifies how to fill columns |
| column-gap | Specifies the gap between the columns |
| column-rule | A shorthand property for setting all the column-rule-* properties |
| column-rule-color | Specifies the color of the rule between columns |
| column-rule-style | Specifies the style of the rule between columns |
| column-rule-width | Specifies the width of the rule between columns |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies a suggested, optimal width for the columns |
| columns | A shorthand property for setting column-width and column-count |