How do you use Gridulator in CSS?HELP!

From my understanding gridulator.com does not provided you with a CSS Grid System, but just gives you the guidelines to create your own.

Check out http://960.gs/

Thanks Justin, I'll check that out. I'm also still curious how do you use Gridulator.com to make grids?

No problem,

Heres the low down on how you would use Gridulator;

The first option you see there is the total width, this is the width of your content area Gridulator is default to 960px, which is a extremely safe width to use and ensure your site will look good on any monitor. The next option is how many columns you want to use for your grid, normally with a 960 grid people will go with 12 columns.

Once those options are set the table bellow gives you the width you need for each single column and its gutter.

So... if you wanted to write a class of one grid with no gutter you would write this;

.grid_1 { width: 80px; }

and if you wanted to add a class that spanned two grids you would just multiple the previous width by 2

.grid_2 { width: 160px; }

and a grid of three would be 80*3 resulting in a class like this

.grid_3 { width: 240px; }

When it really comes down to it, Gridulator is just a tool to help you set up your own grid system but you still have to do a lot of the leg work.

Hope that helps you.

@Nick -

Gridulator is how Allison created grid.css, she's alread done all of that work of converting the grid system into CSS stylesheets.
Now all you need to is download grid.css and link to it in your html.

grid.css can be downloaded as part of the project files, there's a link under the downloads section to the right of the video.

I wanted to note, that creating a grid will be covered in-depth at the very end of the CSS Foundations course.

Hi,the grid.css download is not given.If it is given then guys please tell me.

look for project file download at the bottom of the page and download it. this world include the grid.css file

it just gives u a link to gridulator.com onliii

Have to admit, it isn't particularly clear in the video!

I realise this is an old topic, but for anyone interested I created an online tool similar to gridulator that gives you the required code. I'm keen for any feedback you guys have as it's my first big project after being on Treehouse for a couple of months (there's a comments section on the site). It's at:

www.oligibbs.com/oligrid

Hi all, I'd clear some confusion you guys probably have regarding grids. Gridulator, as mentioned earlier, is an application that only provides the dimensions for you to create your own grid system. It does not provide the actual .css file that enables you to use grids. As explained earlier by Justin, it's a guide to setup your grids so you don't have to manually calculate the width of each grid, the space for gutter (gutter is the space between each grid line) etc.

If you do want a grid system with the css file, you can check out www.960.gs. The developer has been kind enough to allow us to download custom grid systems for free (with the corresponding .css file).

Hope that helps! Cheers

PS: If anybody would like some additional help with using the 960.gs grid system, and are unable to get a suitable answer online, please feel free to get in touch with me - vijay.rangan@gmail.com.

I was referred to this post cause I had the same question and just wanted to add that I found something called, http://unsemantic.com/ that gives you the code and is a successor to 960 and has responsive/fixed options. Looks pretty good.

@Jeremy Donahue

I also have finished CSS Foundation but can't find any lesson on How to create grids.