Multi column layout properties
Set the content to display over multiple columns. This is mainly used for dividing text into columns
Column count
Set the number of columns an element should be divided into.
Expected value:
- Enter a number - The number of columns.
- auto - Default value. The number of columns will be determined by other properties, like Column min width
- initial - Sets the property to its default value
- inherit - Inherits the property from its parent element.
Column gap
Set the width of the gap between the columns.
Expected value:
- Enter a number - Sets a width for the gap
- normal - Specifies a normal gap between the columns
- initial - Sets the property to its default value
- inherit - Inherits the property from its parent element.
Accepted units:
You can leave blank or specify a unit to be used.
- blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
- px - The value will be applied in pixels
Note: Additional units are accepted. For more information see https://www.w3schools.com/cssref/css_units.asp
Column fill
Set how the content fills the columns.
Options and behavior:
- Balance - Balances the content across the columns
- Auto - Fills each column until it reaches the height, and do this until it runs out of content
- Initial - Sets the property to its default value
- Inherit - Inherits the property from its parent element.
Column span
Sets the content to span the columns. Note: this is not supported by Firefox.
Options and behavior:
- Span - Sets the content to span the columns
- none - Sets the span property to none
- Initial - Sets the property to its default value
- Inherit - Inherits the property from its parent element.
Min column width
Set the minimum width for the columns. The number of columns will be the minimum number of columns needed to show all the content across the element.
Expected value:
- Enter a number - Sets a minimum width for the column
- auto - Specifies a normal gap between the columns
- initial - Sets the property to its default value
- inherit - Inherits the property from its parent element.
Accepted units:
You can leave blank or specify a unit to be used.
- blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
- px - The value will be applied in pixels
Note: Additional units are accepted. For more information see https://www.w3schools.com/cssref/css_units.asp
Rule style
Sets the style of a dividing rule between the columns.
Options:
- None - Display no rule
- Hidden - Display no rule
- Solid - Display a solid rule
- Dotted - Display a dotted rule
- Dashed - Display a dashed rule
- Double - Display a double rule
- Groove - Display a 3D grooved rule
- Ridge - Display a 3D ridged rule
- Inset - Display a 3D inset rule
- Outset - Display a 3D outset rule
- Initial - Sets the property to its default value
- Inherit - Inherits the property from its parent element.
Some rule styles are dependant on the rule width and color. For example, you cannot have a Double rule which is set to 1px in width as there is not enough width to display the double lines.
Rule width
Sets the width of a dividing rule between the columns.
Expected value:
- Enter a number (Negative values are not accepted)
- Enter a keyword - thin, medium, thick (Browsers may render these widths differently)
Accepted units:
You can leave blank or specify a unit to be used.
- blank - Enter a number and the value will be interpreted as pixels
- px - The value will be applied in pixels
Note: Additional units are accepted. For more information see https://www.w3schools.com/cssref/css_units.asp
Rule color
Set the border color of the rule.
Expected value:
- Select a color from the color palette
- Translucent colors are accepted
