CSS Multiple Columns

CSS Multiple Columns

CSS allows defining that element contents wrap into multiple columns with gaps and rules between them.

CSS multiple columns have eight properties mentioned below - 

1. Column-count - 

This property specifies how many columns an element should be divided into.

2. Column-gap - 

The property specifies the gap between the columns.

3. Column-rule-style - 

The property specifies the style of the rule between columns.

4. Column-rule-width - 

The column-rule-width property specifies the width of the rule between columns.

5. Column-rule-color - 

The property specifies the color of the rule between columns

6. Column-rule - 

This is used as a shorthand property.

7. Column-span - 

The property specifies how many columns an element should span across.

8. Column-width - 

This specifies the optimal width for the columns.

Now we will see examples for some of them - 

Example 1  - Using column-count - 

Output  - 

Example 2 -  Using column gap - 

Output  -

Example 3  - Column rule style -

Output  - 

Example 4 - Using column rule color -

Output -