• 1
  • 2
Home > Tips

CSS3 Mulitiple Columns Tutorial: column-gap

 column-gap

 

Function

The column-gap property specifies the gap between the columns.

 

Syntax

 column-gap: normal || <length>

 

Values explanation:

1. normal is default value, which is 1em.

2. <length>: is used to set the gap between columns, which can be any positive integer.

 

Supported browser

 

Same as column-width, column-gap also cannot support W3C standard syntax completely and need to add its prefix in each browser. So we need to add the following code:

 /*Gecko: Firefox3.6+*/
  -moz-column-gap: normal || <length>
  /*Webkit: Safari and Chrome*/
  -webkit-column-gap: normal || <length>
  /*W3C standard*/
  column-gap: normal || <length>/*Presto:Opera11.0+support standard syntax*/

 

Now lets do some practice:

 .columnGap {
     -webkit-column-count: 2;
     -moz-column-count: 2;
     column-count: 2;
     -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
     column-gap: 20px;
  }

 

 

The effect as follow:

 

 

As we can see, weve already divided the element into two columns and set the column gap as 20px.

 

And then lets add specific width value in the next example:

 .columnGapWidth {
    -moz-column-width: 193px;
    -webkit-column-width: 193px;
    column-width: 193px;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }

 

The effect as follow:

 

 

As we can see, the container cannot be displayed as two columns. We all know the general width of the element is 400px. Its been divided into two columns and now each column is set as 193px. In the first example, the container can be displayed as two columns normally by set the value of the column-gap as normal and each column is 193px. Its quite a simple mathematical problem, you can learn that: When the value sum of all the parameters is beyond the general width of the element, the element cannot run layout correctly and the column-width will be changed into the same value as the general width of the element.

 

 

 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