Calculate left and right position of 2d elements

Question

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%

etc

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?

Answer 1

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.

Answer 2

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.