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

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe

Comments (12 Comments)

1. Gervet
   March 22, 2011

   This grid is very interesting. Thanks for the contribution

2. SFdude
   March 23, 2011

   thank you Alen! very simple Q: (from a CSS newbie...) ----------- How & where in the code, do you specify the left & right "buffer" margins of the demo text, inside each Col.? (right now, the demo text "touches" the borders of each Col.) thanks!

3. Rich McNabb
   March 23, 2011

   @sfdude You will need to adjust the padding, however you may need to adjust the width to accommodate the increased size. The box model will explain this in more detail - http://www.w3schools.com/CSS/css_boxmodel.asp

4. TheKoolDots
   March 23, 2011

   Nice! Assigning widths base on % saves both time and eliminates the frustration of setting and resetting fixed widths so the page layout is consistent / doesn’t overflow when zooming in / out in your browser. Thanks for the useful info,

5. Greg Babula
   March 24, 2011

   I had something very similar using pixel widths, this is much more flexible, thanks!

6. Zeth
   March 24, 2011

   Ahh.. HTML5.. I'm scared to start, but then again I can't wait!! It's a wierd situation to be in. Good blog!

7. cssglobe
   March 24, 2011

   @SFdude: What I usually do is add left and right margins to child elements, assuming you have precise control over what's inside each column. If you don't, then some sort of nested container element can be used. As Rich suggested you could go and add padding to each column but then you would have to recalculate entire grid system i.e. adding 1% padding on each side means that you would have to decrease the width of each column by 2%. Here's the example I created for you: http://cssglobe.com/lab/percentage_grid/index_padding.html

8. cssglobe
   March 24, 2011

   ...of course, you can follow the same principle and add more padding if you want to! Cheers!

9. Alt Web Design
   March 24, 2011

   Thanks for taking time for sharing this article, it was excellent and very informative. It’s my first time that I visit here. I found a lot of informative stuff in your article. Keep it up. Thank you.

10. Jeorge Peter
    March 25, 2011

    I would like to create the jquery plugin on my article. I never had to struggle to enlarge my product image to magnifies and create a very stunning images to my sites.

11. basstk
    April 8, 2011

    IE7 widescreen failure

12. foraldre net
    April 19, 2011

    I ve been through your blog starting from the post about the vertical lines and believe me i really liked the way you ve mentioned each and every step and the way you clarify the points. Thanks for such a nice blog.

Sorry, the comment form is closed at this time.