Loading lesson path
This page covers CSS column rules, span, and width properties.
Formula
column - rule - style property specifies the style of the vertical rule between columns:{
column-rule-style: solid;
}Formula
column - rule - width property specifies the width of the vertical rule between columns:{
column-rule-width: 1px;
}Formula
column - rule - color property specifies the color of the vertical rule between columns:{
column-rule-color: lightblue;
}Formula
column - rule property is a shorthand property for setting all the column - rule -* properties above.Sets the width, style, and color of the vertical rule between columns: div
{
column-rule: 1px solid lightblue;
}Formula
column - span property specifies how many columns an element(typically a heading) should span across.
Formula
Specify that the < h2 > element should span across all columns (and be aligned in center):h2 {
column-span: all;
text-align: center;
}Formula
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.
Specify that the suggested, optimal width for the columns should be 100px:
div {
column-width: 100px;
}Formula
The following table lists all the multi - columns properties:Formula
Specifies the number of columns an element should be divided into column - fillFormula
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 - widthSpecifies a suggested, optimal width for the columns columns
Formula
A shorthand property for setting column - width and column - count