0

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?

enter image description here

Gerry Myerson
  • 179,216
Shannon Hochkins
  • 145

2 Answers2

1

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.

Ross Millikan
  • 374,822
0

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.

Emanuele Paolini
  • 21,447
  • 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 :(

     – Shannon Hochkins Jul 09 '13 at 07:32