CSS can help you put the text content in multiple columns just like the newspapers do. This makes a large amount of text more presentable and also optimizes the space usage. The multi-column layout is used for this purpose.
To achieve the multi-column layout on the web-pages, we need to know about these following properties:
column-count
column-width
column-gap
column-rule-style
column-rule-width
column-rule-color
column-span
We will now study all these properties one by one.
column-count
It is the count as to how many columns the element is going to be divided into.
column-gap
For a presentable display, the different columns need to have a visible gap. This can be achieved by providing a suitable value to the column-gap property.
column-rule-style
The rule here is the separating lines for the different columns. We can style the column-rule with different properties. The column-rule-style specifies the style of the rule that we’ll use.
column-rule-width
The width of the columns rule can be altered using the column-rule-width property. You can specify the value according to how thick you want the rule to be.
column-rule-color
The color of the column rule is generally kept in a shade darker than the background color. The property column-rule-color helps us to set the color for the rule.
All the column-rule=* properties can be set using the short and column-rule. The values can be in any order for different properties.
column-span
An element can span for multiple columns and this is decided with the help of column-span property. Generally, we use this property for the text elements only to set the extent to which they can expand over the columns.
column-width
We can set the width of the columns using this property. An appropriate size for the column-width is essential to make the content attractive and presentable and also ensuring proper usage of the horizontal space.