• 1
  • 2
Home > Tips

CSS3 Multiple Columns Tutorial: column-count

CSS Multi-column Layout Module is a kind of new layout strategy the W3C add for CSS3. This kind of layout is not strange to most of people for it has been used by newspapers and magazines for years:

 

 

In the past, its not an easy job for designers to achieve this layout above. However, with css3 multiple columns, you can easily make this kind of layout.

 

CSS3 Multi-column Layout mainly contains these parts below:

1. column-count
2. column-width

3. column-gap; column-rule-color; column-rule-style; column-rule-width; column-rule;

4. break-before; break-after; break-inside;

5. column-span;

6. column-fill.

 

In this article, Ill show you the use of column-count.

 

 column-count

 

Function:

The column-count property specifies the number of columns an element should be divided into.

 

Syntax:

 column-count: auto || number

 

Values explanation:

1. auto: its the default value of column-count. When you dont set any value, the default value is auto and the column count is determined by other parameters, such as column-width.

2. number: you can put any positive integer here but not with a unit to show the column count.

 

Supported browsers:

 

As we can see, column-count cannot be supported by IE browsers. Besides, column-count needs its private field when its in Firefox and Webkit: -moz and Cwebkit. So the right way to write it should be:

 

   /*Firefox*/
  -moz-column-count:auto || number;
  /*Webkit*/
  -webkit-column-count:auto || number;
  /*W3C-standard*/
  column-count:auto || number; /*Opera11.0+*/

 

And then lets build a simple example:


HTML Code:

 <div class='demo'>Lorem ipsum dolor sit ... deserunt mollit anim id est laborum.</div>

 

CSS code:

 .demo {
     width: 400px;
     border: 1px solid #ccc;
     padding: 10px;
  }

 

 

At first, lets handle the first situation: column-count:auto. As weve said, the value of column-count is auto, the columns count is determined by other properties, such as column-width. Lets see the specific code:

 .columnCountAuto {
 -moz-column-count: auto;
 -webkit-column-count: auto;
 column-count: auto;
 -moz-column-width: 193px;
 -webkit-column-width: 193px;
 column-width: 193px;
  }

 

Actually when the value is auto, we dont need an explicit expression because the default value is auto. You guys can try to delete column-count: auto to see if the result is the same. There is one point I should mention you that when you are only use column-width to control displayed columns count, the value of column-width should not be beyond the value calculated by the formula below:

column-width = (width-(n-1)*font-size)/n  /*n2 and other values are all default values*/

 

The result:

 

 

This is the result when the value is auto. Now lets set a specific number to see whatll happen.

 

Lets set the column count as 3:

 .columnCountLength{
     -moz-column-count:3;
     -webkit-column-count:3;
     column-count:3;
   }

 

The result:

 

 

From the result we can see only if the Multi element is given a specific column count, it will calculate the width of each column by column count and general width.

 

 

 

 Contact Us for Help

If you cannot find a proper solution to your issue through the above methods, our support team is always on standby for whatever problems youve got. We promise to you we will deal with your issues within 24 hours. Contact Our Support Team

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0