Webmasters Gallery

Web grid systems help front end coders to layout a document faster. In this article I am presenting a percentage based grid system that is included in the Easy framework’s CSS.

The main characteristics of this grid system is that all the columns have percentage based width so they adapt to the container element. It means that with using this system you will not have to define a width of each column by hand, you can simply throw it inside any container and the column widths and column gutters will be automatically set.

This system supports up to 6 equal width columns, so you can choose anywhere from 2 to 6 columns in the set. In each column set you can have double, triple, quadruple or even quintuple columns. The column gutters are set to 2 percent for each column set, so in case you have different column sets in one container you will have equal column gutters.

Naming the columns and column containers

Grid system often compromise the semantics. Unfortunately that is something we have to live with if we want to use this kind of approach.
Important thing about Easy Percentage Grid System is that column containers must have the base class name cols (as in columns – plural) while each column must have a class name col (column – singular). By using this base classes alone the grid system can properly display two equal columns. So this code

<div class="cols">
    <div class="col first"></div>
    <div class="col"></div>
</div>

can be used for creating 2 equal columns. Note the class name first. I am using it (along with :first-child pseudo selector) to erase the left margin for the first column.

If you want to create more than 2 column set you need to add a class name colsX to the container where X represents the number of columns in the set. Here’s a sample:

<div class="cols cols4">
    <div class="col first"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

If you need to include a column with multiple width (double or triple width column) you can add a class name colX where X is the number that defines how wide the column is. Again note the singular here! Here’s an example of 5 columns set where second column is double the width of the default ones.

<div class="cols cols5">
    <div class="col first"></div>
    <div class="col col2"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Demos

Take a look at the demos to see how it all looks like.

• 2, 3 and 4 columns demo – fixed width
• 5 columns demo – fixed width
• 6 columns demo – fixed width
• 2, 3 and 4 columns demo – fluid width
• 5 columns demo – fluid width
• 6 columns demo – fluid width

So, to recap, Easy Percentage Grid System features:

• place inside any fluid or fixed width container, without having to worry about each column width
• supports up to 6 equal columns
• supports multiple width columns (double width, triple width etc.)
• column gutters have the same width for each column set
• basic, solid CSS styling for HTML elements included

Download the Easy Percentage Grid System

Edit: Column Padding

It is possible to add side paddings to columns expressed in percentages too. The principle would be, add padding you desire to the “global” column definition (let’s say we want 1% side padding):

.col, .col2, .col3, .col4, .col5{
    float:left;
    display:inline;	
    margin-left:2%;
    padding:0 1%;
    background:#f1f1f1; /* only for demo purposes - remove this line */
    }

What we need to do is decrease the width of each column by double that percentage. Left padding 1% and right padding 1% makes 2% decrease in column width. So instead of 49% width for default column, it will now be 47%. You need to manually adjust the width for each column, but it’s not that big edit. I prepared a 1% side padding demo for you.

Take a look at the fixed width container demo with 1% side padding