search

dotjay / hashgrid

A little tool that inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.
https://dotjay.github.io/hashgrid/
Other
446 stars 46 forks source link

Missing my last column & gutter... #19

Closed Henrykiki closed 10 years ago

Henrykiki commented 10 years ago

Hi guys, I'm trying to use the wonderful hashgrid.js on my new school project. But strangely, the last column, and the last gutter don't appear...

My project is about 1280px and I have 12 column of 81px with 11 gutters of 27px. (size of my line-height)

It starts, and it ends by a column, not by a gutter.

Can you explain me why it doesn't work ?

Give you the link to my work : https://dl.dropboxusercontent.com/u/54989832/github/site/index.html

And a screenshot of my grid over my work : https://dl.dropboxusercontent.com/u/54989832/github/site/screenshotgrid.png

Probably you'll need to see my hashgrid.css so it is : https://dl.dropboxusercontent.com/u/54989832/github/site/css/hashgrid.css

Thanks a lot for your help.

Lisa-Williams commented 10 years ago

@Henrykiki and all others Happy New Year!

@Henrykiki Are you still looking for an resolution/explanation? Or have you already fixed this?

Henrykiki commented 10 years ago

I fixed this by an another way. Hugrid generated my grid as I want. So.. Thanks but I didn't have time to wait too longer. Thx and Happy New Year too, but maybe it could be interesting to solve this problem for the next people.

Lisa-Williams commented 10 years ago

It is not a problem/error with Hashgrid.

Solution: Subtract border left and right from your column width.

You asked:

Can you explain me why it doesn't work ?

From the index.htm file in the repo: (I marked the relevant line with <==== This!)

/**
 * Vertical grid lines
 *
 * Set the column width taking the borders into consideration,  <==== This!
 * and use margins to set column gutters.
 */

My project is about 1280px and I have 12 column of 81px with 11 gutters of 27px. (size of my line-height)

12 x 81px = 972px 12 x 2px = 24px (1 px border left and 1px border right on each column) 11 x 27px = 297px Total 1293px

So you are 13px over your max-width of 1280px. And Hasgrid calculates one column less (11) than you wanted. Because only that many columns will fit in 1280px.

dotjay commented 10 years ago

Sorry for not getting around to replying to this. But the time I saw it back in April, @Lisa-Williams had already helped you.

Thanks for using Hashgrid. :-)