Easy Percentage Grid System with HTML5

Web grid systems help front end coders to layout a document faster. In this article I am presenting apercentage 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>