A Grid System for CSS that’s Simple and Light

Grid CSS

http://brajeshwar.com/2011/grid-a-minimal-css-grid-utility/

If you are looking for a lightweight and simple CSS Grid system than Grid – a minimal CSS Grid Utility‘ might be a useful option for you.   Grid is a small collection of classes that conveniently floats elements with an appropriate amount of width.   In addition to being incredibly light and straightforward the Grid works well in a fluid layout.

Fluid Grid

Fluid Layout of the Demo

To see the fluid-ness in action on their demo you will have to change the body tag width from 960px; to 100%.   This can be done easily be done using the FireBug extension in Firefox.

Grid Fluid Brick Wall

Grid Fluid Brick Wall

The strength of the utility is the simplicity and no learning curve.  After reading the through the CSS code once I was able to generate a fluid brick wall in about 45 seconds.

The basis of developing the columns comes from applying a class “gXofY” – Where X is how many to take up and Y is the total number.   So if there are two equal columns you want apply the class of “g1of2″ to both.

This Grid system, out of the box, is limited to a maximum of 5 columns.  If you you require additional columns for your project you can easily add more as you simply need to do the math to come up with each class.   For instance  g1of9 would be width: 11.111111 %.

The only other issue I had when creating my brick wall example was that there was no ’2of4′ class.  Knowing I want the block to be 50%  I simply applied the 1of2 – but now that row contains the following columns in this order: 1of4, 1of2, 1of4.  In dealing with the row I would rather it could have read 1of4, 2of4, 1of4.   In addition there is no 1of1 class (100% width).   But as mentioned before this is a good starting block for setting up a simple Grid system that works for you.

Grid is a simple and useful utility authored by Brajeshwar that will aide in the rapid development of simple CSS layouts.

 

Bookmark the permalink.

3 Responses to A Grid System for CSS that’s Simple and Light

  1. John says:

    I suspect this line
    I simply applied the 1of2 – but now that row contains the following columns in this order: 1of4, 1of2, 1of4.

    should read
    I simply applied the 1of2 – but now that row contains the following columns in this order: 1of4, 1of2, 2of4,2of2

    Or am i wrong?

    • Sorry for not being clear.
      I built a brick wall as I was trying out the grid system – In my brick wall I have a layer of bricks. In that layer of bricks I have 3 divs (bricks) – I want the middle brick to take up twice as much room as either of the outside bricks. So I am spreading these three bricks across 4 units of space. It would have made sense to me to assign the class of the bricks in the following order: “1of4, 2of4, 1of4″. But there is no “2of4″ in grid. Knowing that 2of4 is simply 50% width – I accomplished my goal by applying the “1of2′ (which is 50% width). so the classes are assigned as “1of4, 1of2, 1of4″.

  2. Pingback:The CSS Grid jQuery Plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>