Google Plus Facebook Twitter RSS YouTube

CSS3 column-count Property

column-count is a new property in CSS3 styling system. It is introduced in Cascading Style Sheet level 3 to define a multicolumn layout through block elements which could be HTML elements or users defined Non HTML elements. Currently, it can only applicable to non-replaced block level elements, table cells and inline block elements but table element does not support to column-count property because it gives a multicolumn layout module through number of rows and columns. The main purpose of column-count property is to define number of columns by converting a single block level element into multicolumn layout module. In other words, it makes block level elements to split the data into number of defined columns.

CSS3 Multi-column Layout Module

Syntax

CSS Code

column-count: value;

The column-count property is initially set to auto but users can define number of columns by giving an integer value to this CSS3 property.

However, column-count property is not directly worked in any web browser except Opera. However, Mozilla Firefox supports to this experimental feature with -moz- prefix. Similarly, webkit supports with -webkit- prefix which made it works in Safari and Google Chrome. Internet Explorer soon introduces this feature in next IE version. So, add -moz- and –webkit- prefixes in styling area while testing or using this experimental feature practically as exampled below.

Creating Multicolumn Layout Module

Consider a block level element. In this example, HTML element paragraph tag is considered to demonstrate this property. Place some data inside the paragraph element and it displays data as a paragraph in web browser.

HTML Code

<body>

  <p>Here is a sample demonstrating data for your understanding and the example data
   is like this. There is no priority to read this data. Multicolumn means creating
   number of columns. In columns data can be placed and each column holds limited
   data but the limit of column can be extended by increasing the height and width
   of the column. By increasing the height and width of column, users can place as
   much data as you want. Columns are often used to display the data in a structural
   form. This sample data becomes a multicolumn layout module by the cascading style
   sheet property in this web documents and you exactly understand how exactly it
   appears in web browser to viewers.</p>

</body>

This example data is now appeared in web browser as a text paragraph in every web browser.

Output in Web Browser

Here is a sample demonstrating data for your understanding and the example data is like this. There is no priority to read this data. Multicolumn means creating number of columns. In columns data can be placed and each column holds limited data but the limit of column can be extended by increasing the height and width of the column. By increasing the height and width of column, users can place as much data as you want. Columns are often used to display the data in a structural form. This sample data becomes a multicolumn layout module by the cascading style sheet property in this web documents and you exactly understand how exactly it appears in web browser to viewers.

However, the same data in a single block element is converted into a multicolumn layout module by using css3 column-count property.

Integer

Paragraph element (including many other block elements) is a single column element. So, the integer value is start from 2. In this example, value of column-count property is given 2.

CSS Code

<head>
<style type="text/css">

  p {
     column-count: 2;
     -moz-column-count: 2;
     -webkit-column-count: 2;
  }

</style>
</head>

Now, the single column block element is transferred into two columns and the data is spilt into two columns when you add column-count property to block element as shown in above CSS code box.

Output in Web Browser
Here is a sample demonstrating data for your understanding and the example data is like this. There is no priority to read this data. Multicolumn means creating number of columns. In columns data can be placed and each column holds limited data but the limit of column can be extended by increasing the height and width of a column.   By Increasing
the height and width of column, users can place as much data as you want. Columns are often used to display the data in a structural form. This sample data becomes a multicolumn layout module by the cascading style sheet property in this web documents and you exactly understand how exactly it appears in web browser to viewers.

Now, give integer value 3 to column-count property.

CSS Code

<head>
<style type="text/css">

  p {
     column-count: 3;
     -moz-column-count: 3;
     -webkit-column-count: 3;
  }
  
</style>
</head>

It now spilt data into three columns.

Output in Web Browser
Here is a sample demonstrating data for your understanding and the example data is like this. There is no priority to read this data. Multicolumn means creating number of columns. In columns data can be placed     and     each column
holds limited data but the limit of column can be extended by increasing the height and width of the column. By increasing the height and width of column, users can place as much data as you want. Columns are often    used to    display  the
data in a structural form. This sample data becomes a multicolumn layout module by the cascading style sheet property in this web documents and you exactly understand how exactly it appears in web browser to viewers.

As you increase the integer value of column-count property, the number of columns is defined. Similarly, the total data is shared in those columns as demonstrated above.

Auto


CSS Code

<head>
<style type="text/css">

  p {
     column-count: auto;
     -moz-column-count: auto;
     -webkit-column-count: auto;     
     column-width: 100px;
     -moz-column-width: 100px;
     -webkit-column-width: 100px;
  }
  
</style>
</head>

If you are not confident about number of columns, you can give choice to column-count property by setting value auto but it cannot determine the number of columns until you specify column width through css3 column-width property. In other words, when you specify width of the column through column-width property, web browser decides the number of columns by considering width of the web page and input the value to column-count property automatically. Based on input value from web browser, column-count property shares the data in multicolumn. In this way, web professional can use CSS3 column-count property in creating the multicolumn layout module.

Follow Us
Google Plus Facebook Twitter RSS YouTube
Subscribe via Email
Save or Share This CSS3 Tutorial with Your Friends
Save or Share CSS3 Tutorial