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:
We will now study all these properties one by one.
It is the count as to how many columns the element is going to be divided into.
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.
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.
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.
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.
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.
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.