How are grids laid out

This is a pretty good explanation on the purpose and implementation of grids http://css-tricks.com/dont-overthink-it-grids/

Grids on the web define vertical columns, the height of which is determined by content. So there is never any need to create grid rows like you would have on gridpaper.

A grid in its simplest form is used for something like creating a main content area and a sidebar like this:

/* very basic 12 column grid */

.wrapper {width:1000px}

.grid-8 {width:75%; float:left;}    /* 8/12 =75% */
.grid-4 {width:25%; float:right;}    /* 4/12 =25% */

<div class="wrapper">

<div class="main-content grid-8">
  <p>main content info goes here</p>
</div>

<div class="sidebar grid-4">
  <p>sidebar content goes here</p>
</div>

</div>

So your main content would be in the 750px wide (75% of 1000px) column defined by the .main-content div on the left of the page and your sidebar content would be in the 250px wide column adjacent to .main-content on the right of the page.

Oh right and as there classes a grid-8 can be used more then once, this makes a tun more sense so they are just width restrictions awesome thanks

CSS grids basically are just a CSS include file where you can reference with a class to set width, height, margin & float.

Check out this short (3min) video on what is a CSS grid