I'm trying to calculate the left and right position of a grid layout.

This is the information I have:

ContainerWidth: 960px;    
GutterWidth:20px;         (GR + GL)
NumberOfColumns:16;       (C * 16)
ColumnWidth:40px          (C)

I need to calculate their positions respective to the ContainerWidth as a percentage:

Example for one loop, I should be able to get these values:

GL: start 0%        -  end 1.04167%;
C : start 1.04167%  -  end 6.25%;
GR: start 6.25%     -  end 7.29167%


so the above would be continued for the length of (NumberOfColumns)

However, I'm not even sure if the above math is correct, how could I calculate this?

enter image description here


The total width of the columns is $16 * 40=640$ pixels. They fill up $960-20=940$ pixels (subtracting the gutter). There are $19$ gaps between the columns, so the width of one gap is $\frac {940-640}{19}\approx 15.789$ They don't fit evenly. If you round up to $16$, you will have four extra pixels. I'll do that. The first one covers $10$ to $50$. The second covers $66$ to $106$ etc. If you count the columns from $0$, column $n$ covers $10+56n$ to $50+56n$. To get percentages, you just divide, so column $1$ covers from $\frac {66}{960}= 6.875\%$ to $\frac {106}{960} \approx 11.04\%$. I'm not sure what the percentages help, but there they are.


The percentage is nothing else than a ratio. So, for example, to compute the percentage of "column start", you simply compute $$ \frac{10px}{960px} = 0.0104 = 1.04 \% $$ (approximate values).

The same for the other measures the $n$-th column starts at pixel (40+20)*(n-1)+20 and end at pixel (40+20)*n, if you divide by 960 you get the percentages.

  • $\begingroup$ I know this much, but I need to calculate the start and end point. I may be really over thinking this. But how could I iterate over each one? This does give me the correct value, but only for one gutter :( $\endgroup$ – Shannon Hochkins Jul 9 '13 at 7:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.