Missing last column and gutter (in all browsers) about hashgrid

[sebastiansimonis]

Tested it with a 960-12-20 (60px columns) grid. Same problem.

[dotjay]

Hi Sebastian,

I've taken a look at your test page, the left gutter added to #grid div.vert.first-line is causing the last vertical grid line to not render.

If you're going for 12 columns with 11 gutters, you'll need to redo the CSS calculations with something like this:

#grid {
width: 940px;
position: absolute;
top: 0;
left: 50%;
margin-left: -470px;
}

#grid div.vert {
width: 32px;
border: solid darkTurquoise;
margin-right: 47px;
border-width: 0 1px;
}

#grid div.vert.first-line {
margin-left: 47px;
}

It looks like you may be trying to get some outer gutters with a different width to the others. Try this:

#grid div.vert-container {
margin: 0 16px;
border: solid darkTurquoise;
border-width: 0 1px;
width: auto !important;
}

[sebastiansimonis]

truth is, i'm pretty sure i didn't understand why this works, but fact is, it works just perfectly fine. but i'm a designer, so i don't have to understand everything right?
you can see my result here: http://dl.dropbox.com/u/4332685/Hashi-60-20/Publish/test.html (just a test for an upcoming project)
i use the semantic.gs (semantic grid system) for the layout and as you can see it now works perfectly together with the hashgrid. even if you resize the page and the media queries get in action.
thanks a lot for your help and for this great tool.

[sebastiansimonis]

forgot to mention that i'm using the 60px column version right now, so don't be irritated.

[dotjay]

Sorry for slow reply. No worries… glad to help.

Setting up hashgrid probably isn't as clear as it could be. Complicated grids end up a bit tricky to code CSS for. It's been on my mind to create a code generator of some sort and have been talking to David Sleight about something similar to Gridulator.