html

Column properties in CSS | Explained

Often the structure of the web design requires web developers to split their content into multiple columns. Moreover, just splitting the content is not enough, giving those columns a certain style is also necessary. CSS provides a number of properties to split the content of a website into various columns efficiently. These properties are referred to as column properties that have been enlisted below.

  1. column-count Property
  2. column-fill Property
  3. column-gap Property
  4. column-rule Property
  5. column-rule-color Property
  6. column-rule-style Property
  7. column-rule-width Property
  8. column-span Property
  9. column-width Property
  10. columns Property

Let’s learn them in detail.

column-count Property

For the purpose of dividing the content an element contains into the number of columns specified, this property is used.

Syntax

column-count: auto | number | initial | inherit;

Parameters explained

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.

Example

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.

column-fill Property

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.

Syntax

column-fill: auto | balance | initial | inherit;

Parameters explained

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.

Example

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.

column-gap Property

In order to define the gap between each column, the column-gap property is used.

Syntax

column-gap: normal | length | initial | inherit;

Parameters explained

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.

Example

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%.

column-rule-color Property

In order to provide some color to the rule of columns, this property is used.

Syntax

column-rule-color: color | initial | inherit;

Parameters explained

color: This value states the color of the rule.

Example

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.

column-rule-style Property

As the name suggests, the column-rule-style property gives some style to the rule present between different columns.

Syntax

column-rule-style: none | dotted | hidden | dashed | solid | double | groove | inset | outset | ridge | initial | inherit;

Parameters explained

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.

Example

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.

column-rule-width Property

This property provides some width to the rule between multiple columns.

Syntax

column-rule-width: length | medium | thin | thick | initial | inherit;

Parameters explained

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.

Example

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.

column-rule 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.

1. column-rule-color

2. column-rule-width

3. column-rule-style

Syntax

column-rule: column-rule-color | column-rule-width | column-rule-style | initial | inherit;

Parameters explained

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.

Example

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.

column-span Property

The property that describes the number of columns around which an element should span is called the column-span property.

Syntax

column-span: none | all | initial | inherit;

Parameters explained

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.

Example

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.

column-width Property

As the name suggests, the column-width property provides column width.

Syntax

column-width: auto | length | initial | inherit;

Parameters explained

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.

Example

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.

columns Property

This is a shorthand property for column-count, and column-width properties.

Syntax

columns: auto | column-count | column-width | initial | inherit;

Parameters explained

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.

Example

Consider the example to understand the columns property.

We have set the column count to 2 having a width of 100px.

Conclusion

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.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.