CSS Multiple Columns

Prev
Next

CSS Multiple Columns

CSS MULTIPLE COLUMNS

Users often find it difficult to read a sentence where the width of the line is big and they feel distracted to track the next line.

So, we can break the texts in a long line by using the CSS Multiple Columns layout which is often called as CSS multi-column layout. There are several properties of multi-column layout –

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

Multiple Column Count

The column-count property decides the count of the number of columns a particular element will be divided into.

Syntax:
column-count: number;

Example

.col-count {
 background:#F1F1F1;
 -webkit-column-count: 2; 
 -moz-column-count: 2; 
 column-count: 2;
 border:1px solid teal;
 padding:6px;
}
Run the Code

Column Width

The column-width property sets the width of the column.

Syntax :
column-width: auto| length-val| inherit;

auto – > Browser will automatically assign the optimal width
length-val – > You need to set the valid value of the column length
inherit -> It will get the width from its parent

Example

.col-width {
 background:#F1F1F1;
 -webkit-column-count: 2; 
 -moz-column-count: 2; 
 column-count: 2;
 -webkit-column-width: 100px;
 -moz-column-width: 100px;
 column-width: 100px;
 border:1px solid teal;
 padding:6px;
}
Run the Code

CSS Columns

To set the column-width and column-count, you can directly use the shorthand columns property.

Suppose, we code – columns: 150px 4;

This does not mean that the column-width and column-count will be exactly 150px and 4 respectively but what actually it says is – On an average screen device, the minimum width of the column should be 150px while the optimal number of columns can be maximum 4.

So, the width can be more than 150px as well and columns can be 4 depending on the device size. Similarly, for a very small device, if the browser does not find a minimum width of 150px, then it can reduce the width of the column as well and in that case, the number of columns can also shrink.

Syntax :

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

auto – > Browser will automatically assign the optimal column width and count
inherit -> It will get the column width and count from its parent

Example

.columns-val {
 -webkit-columns:120px 3; 
 -moz-columns: 120px 3; 
 columns:120px 3;
}
Run the Code

Column Gap

Using the column-gap property, you can control the space or gap between 2 consecutive columns.

Syntax :
column-gap: length-val| normal| inherit;

normal – > This is the default value
length-val– > Valid length for a gap
inherit – > The same property as that of parent

Example

.col-gap {
 -webkit-column-count: 3;
 -moz-column-count: 3; 
 column-count: 3;
 -webkit-column-gap: 50px
 -moz-column-gap: 50px; 
 column-gap: 50px;
 padding:10px;
 color:crimson;
}
Run the Code

Column Rule Style

The column-rule-style is similar to the border-style property using which you can set the style of the column rule which is present between 2 continuous columns

Syntax :
column-rule-style: solid| dashed| dotted| double| ridged| groove| inset| outset| outline| hidden| none| inherit;

Example

.col-rule-style {
 -webkit-column-count:3; 
 -moz-column-count: 3; 
 column-count: 3;
 -webkit-column-rule-style:solid; 
 -moz-column-rule-style: solid;
 column-rule-style: solid;
 padding:10px;
}
Run the Code

Column Rule Width

The column-rule-width is similar to border-width using which you can set the width of the column rule which is present between 2 continuous columns

Syntax :
column-rule-width: length-val|thin| medium| thick| none| inherit;

length-val -> a valid length value for column-rule

Example

.col-rule-width {
 -webkit-column-count:3; 
 -moz-column-count: 3; 
 column-count: 3;
 -webkit-column-rule-width:6px; 
 -moz-column-rule-width: 6px;
 column-rule-width: 6px;
 -webkit-column-rule-style:dotted; 
 -moz-column-rule-style: dotted;
 column-rule-style: dotted;
 padding:10px;
}
Run the Code

Column Rule Color

Similar to the border-color property, the column-rule-color sets the color of the column rule.

Syntax :
column-rule-color: color-value;

color-value -> a valid color value which can be a color name, hexadecimal value, RGB value etc.

If you do not code this, the browser automatically assigns the column-rule-color as black.

Example

.col-rule-color {
-webkit-column-count:3; 
-moz-column-count: 3; 
column-count: 3;
-webkit-column-rule-style:solid; 
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-color:hotpink; 
-moz-column-rule-color: hotpink;
column-rule-color: hotpink;
padding:10px;
}
Run the Code

Column Rule

The column-rule is similar to border property where you can set the width of the column-rule, type of column-rule and color of the column-rule.

In short, it is the shorthand for column-rule-width, column-rule-style & column-rule-color.

Syntax:
column-rule: column-rule-width  column-rule-style  column-rule-color;

Example

.col-rules {
 -webkit-column-count: 3; 
 -moz-column-count: 3; 
 column-count: 3;
 column-rule: 6px solid orange;
 -webkit-column-rule: 6px solid orange;
 -moz-column-rule: 6px solid orange;
 padding:10px;
}
Run the Code

Column Span

Using the column-span, we can control, if an element will span across all the columns or will not span at all.

By default, an element will not span across the columns.

CSS column span property

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

all -> This enables an element to span across all the columns
none ->Do not span across any column
inherit -> Use the same property as that of the parent

Example

.col-span {
 -webkit-column-count: 3; 
 -moz-column-count: 3; 
 column-count: 3;
 padding:10px;
 -webkit-column-rule: 2px solid dodgerblue; 
 -moz-column-rule: 2px solid dodgerblue;
 column-rule: 2px solid dodgerblue;
}

h2 {
 column-span: none; 
 -webkit-column-span: none;
 -moz-column-span: none;
}
h3 {
 column-span: all; 
 -webkit-column-span: all;
 -moz-column-span: all;
}
Run the Code

Column Fill

Suppose, you have a fixed size of your container like div or section where you have set the height as 80px. Now, if you have set the column-count as 4 so you expect 4 columns. By default, the content or text in each column will balance out itself and try to fit uniformly in all the columns. This is the default behavior(same as column-fill: balance).
Let us take another scenario,
where you want to set maximum text in each column, then you have a possibility of some/few columns being empty as well. This is possible using column-fill: auto.
CSS column fill property
Syntax:

column-fill: auto| balance| inherit;

auto -> Fill the content to the maximum area possible in each column even if few columns are empty
balance ->Balance out each column in order to try to fill all the columns. The idea is to try making all the columns as uniform and Non-empty. Of course, the last column can have less content
inherit -> Apply the same property as that of the parent

Example of Multiple Column Fill

section {
 max-width: 100%;height: 80px;
 background:#F1F1F1;
 -webkit-column-count: 4; 
 -moz-column-count:4; 
 column-count: 4;
 border:1px solid teal;
 padding:6px;
}

.col-fill1 {
 column-fill: auto;
 -moz-column-fill: auto;
 -webkit-column-fill: auto;
} 

.col-fill2 {
 column-fill: balance;
 -moz-column-fill: balance;
 -webkit-column-fill: balance; 
}
Run the Code
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!