GridR

Install

Its nice and simple to install and start using GridR by extracting the downloaded zip file and copying the gridr.css file into your web project directory.

Once thats complete you will need to create the link in the head section of your file to the GridR style sheet.

Before we go and add our new columns we first need to add the viewport meta tag to your head section.

The Grid

The grid is made from a single div tag which will house all the rows and columns. You must always declare the grid first otherwise the rows wont float correctly.

The Row

The row sits inside the grid div which will contain your columns and blocks. You will need to create a new row for each set of columns to enable it to float correctly.

You can also adjust the row padding for creating space between each new row of columns.

Columns

This is when you declare what column structure you wish to use. You can find all the column class names at the bottom of this page. To create a row or four columns you will need to repeat this div four times with the same class.

GridR also allows you to nest columns within each other for more dynamic layouts. For example you could use a one-third and a two-thirds layout with a further four column row within the two-thirds column.

The Block

In theory you don't need to use a block div as i have only created this to show you the grid layout. The reason i left it in is so you don't have to style the column class itself, instead style the block.

You could also create more than one block if more unique styling is required.

Conclusion

Putting all the elements together will result in the below markup. As i say you don't need to use the block if not needed but have included it anyway.

Column Sizes

Here is a list of all column sizes. You can also create custom sizes and even nest columns within each other.

You don't always need to create new column styles to achieve the layout you want. For example, if you wanted a two-fourths column to sit with two single fourths, then instead of creating a new two-fourths style simply use the half column to match the size.

I provide the following sizes within the style sheet which i think is sufficient enough to create most layouts.

full-width
one-half
one-third
two-thirds
one-fourth
one-fifth
two-fifths
one-sixth
one-tenth

FAQ's

Before contacting me asking for guidance please check these frequently asked questions as your answer may already exist.

Failing that, drop me an email.

• What versions of internet explorer does gridr support.
  
• GridR is compatible with IE8 onwards. I dont feel the need to offer support for outdated browsers.