Working With Grids

Gridulator only handles PNG and raw numeric output. It is really meant to be be a quick calculator and estimating tool, and only handles PNG output.

@Yared - To add to what @Tony's already excellent answer

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'm in the same boat as Yared.

Let's say I wanted to create a fresh grid, how do you do this via gridulator? I can't seem to export the css only download the png image!

Kind Regards

Gotcha! I was having trouble finding the grid.css file. Thanks for your help

@Matt, i think im starting to understand it. Gridulator helps you map out the layout of columns on your site. For the tutorial we wanted a width of 1000px and 12 columns.

Once you input that information into gridulator, three options are given back to you. The differences between the options are the width of the columns and the space between them, the gutter width.

The tutorial went with the middle option, column width of 65 and a gutter width of 20.

From there you take that information back to css and you create the classes (ie .grid_1, .grid_2, etc)

each of these grids dictate the position and size of the columns.

grid_1 has a width of 65px (as mentioned earlier). Here is where my understanding becomes hazy, but it looks like the position of grid_2 is determined by adding 65px to grid_1 and adding the space between them, which is the gutter(20px). adding those numbers together will give you 150px. You can follow that trail of logic to determine the others. make sense?

Hey @Yared

Thank you for you kind feedback, I'm still a little hazy as well but I suppose if we keep playing around it will become more clearer.

Matt -

The power of CSS grids is that someone can write a whole grid system, like Allison did with grid.css. Then you all you have to do to utilize this power, is to apply the grid classes to your HTML.

Check out this simple demo and let us know if you still have questions about how to apply grids.

Note, that I only defined the background colors, all the other styling on the page in pulled in from grid.css thanks to the classes I reference in my HTML.

I wouldn't worry about the specifics of creating a grid by hand, until you finish the Learn HTML & CSS learning adventure.

Hey James

I would Just like to say thanks I actually see it now. The example you provided with codepen makes it much clearer to understand.

I played with all the other grids and makes it so much easier to see, just what I was looking for.

I LOVE GRIDS

Cheers Mate