Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Nick Zachary
Nick Zachary
6,816 Points

How do you use Gridulator in CSS?HELP!

Hi, I watched Adding Grid to CSS, and I don't understand how to get the code from gridulator.com onto my css.

Thanks

12 Answers

Justin Dawson
Justin Dawson
4,608 Points

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/

Nick Zachary
Nick Zachary
6,816 Points

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

Justin Dawson
Justin Dawson
4,608 Points

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.

James Barnett
James Barnett
39,199 Points

@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.

Zerksies Washington
Zerksies Washington
29,792 Points

I just happened upon this post while searching for help on grids. I had already gone through the CSS foundations and saw nothing on how to build a grid. After seeing this post I went back just to make sure, and I don't see it anywhere. It's something I'd really love to watch because it's kind of a confusing topic for me right now.

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

Vijay Rangan
Vijay Rangan
7,543 Points

Hi John,

The project files are located under the "Download" section just below "Code Playground". I downloaded the files now to check if the grid is included, and it is. You can find it under the "Css" folder. Hope that helps. Cheers!

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

Oliver Gibbs
Oliver Gibbs
9,771 Points

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

Vijay Rangan
Vijay Rangan
7,543 Points

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.

Dwayne Neckles
Dwayne Neckles
1,715 Points

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.

Omer Asadullah
Omer Asadullah
10,415 Points

@Jeremy Donahue

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