- column-count Property
- column-fill Property
- column-gap Property
- column-rule Property
- column-rule-color Property
- column-rule-style Property
- column-rule-width Property
- column-span Property
- column-width Property
- columns Property
Let’s learn them in detail.
For the purpose of dividing the content an element contains into the number of columns specified, this property is used.
auto: This is a default value that evaluates the number of columns on the basis of other properties such as column-width.
number: This value divides the content into the given number of columns.
Suppose you want to divide your content into two columns then follow the example below.
In the example above, we took a lengthy paragraph and placed it inside a div container and by using the column-count property, we splitted up the paragraph into two columns.
The property that determines how the content of an element will be balanced once it is divided into columns is referred to as the column-fill property.
auto: This value fills the columns in such a way that the content takes up only the required amount of space in each column and this may leave certain columns empty.
balance: This value divides the content into each column equally.
The example below demonstrates the balance parameter of the property under discussion.
Here, we have defined the column-count as 3 and provided some height to the div container; now the balance parameter of the column-fill property will equally divide the paragraph in each column.
In order to define the gap between each column, the column-gap property is used.
normal: This is a default value that states a normal gap between columns.
length: This value specifies the gap in between the columns in the form of length.
Consider an example to understand how column-gap property works.
In the example above, we are using the length parameter of the column-gap property and have set it to 30%.
In order to provide some color to the rule of columns, this property is used.
color: This value states the color of the rule.
Suppose you want to give rule a blue color with a solid style.
The example above states that the paragraph must be divided into three columns with a rule having a blue color and a solid style. Use the column-rule-color property along with the column-rule-style property to see its effect.
As the name suggests, the column-rule-style property gives some style to the rule present between different columns.
none: This is a default value that specifies no style.
dotted: This value specifies a dotted style.
hidden: It states a hidden style.
dashed: It specifies a dashed rule style.
solid: It describes a solid style.
double: It states a double rule style.
groove: It specifies a 3D grooved rule style.
inset: It states a 3D inset style.
outset: It specifies a 3D outset rule style.
ridge: It states a ridged style rule in 3D.
Let’s give the rule a dashed style.
The example above demonstrates the dashed style of the rule. You can use other values of the column-rule-style property according to your desire.
This property provides some width to the rule between multiple columns.
length: This value specifies the width of the rule in numbers.
medium: This is a default value that sets the width of the rule to medium.
thin: It defines a thin width of the rule.
thick: It defines a thick width of the rule.
The example below shows how the column-rule-width property works.
We have set the width of the rule to 5px with a solid style in the above code. To see the effect of the column-rule-width property, use it with the column-rule-style property.
For the purpose of providing some width, style, and color to the rule between various columns, the column-rule property is used. This is a shorthand property for the following properties.
column-rule-color: This parameter specifies the rule color.
column-rule-width: This value specifies the rule width.
column-rule-style: This value specifies the style of the rule.
Consult the example below to understand the property under discussion.
In the above example, we have defined that the width of the rule should be 5px with a dotted style and a pink color.
The property that describes the number of columns around which an element should span is called the column-span property.
none: This is a default value that specifies that the element will span across a single column.
all: This value stated that the element will span across each and every column.
Let’s see how the none value of the column-span property works.
To demonstrate the concept of the column-span property we have first made a heading inside the div container then set the column-span property of the heading to none, therefore, the heading is adjusted inside one of the columns. However, the all parameter places the heading above the columns like this.
The heading was separated from the columns using the all parameter.
As the name suggests, the column-width property provides column width.
auto: This is a default value that specifies that the width of the column will be evaluated by the web browser.
length: This value defines the column width in numbers.
Suppose you want to give the columns some width of your own choice then use the length parameter.
Here we have set the column-width to 100px.
This is a shorthand property for column-count, and column-width properties.
auto: This is a default value that provides both the count and width of the columns
column-count: This value states the maximum number of the columns
column-width: This value describes the minimum width of the columns.
Consider the example to understand the columns property.
We have set the column count to 2 having a width of 100px.
Splitting the content appearing on a website into columns and giving those columns a certain style can be performed using various CSS properties that fall under the category of column properties. There are a number of column properties such as column-count, column-rule, column-span, column-width, column-rule-color, etc. Each of these properties serve a different purpose which we have demonstrated along with the help of relevant examples.