How to use algebra to solve web design grid issue?
The basic web solution is to use the largest piece of content you have as the metric for all your styles. Then use things like margin: 0 auto or text-align to position the smaller content blocks within the larger space. So, if you have a column that has 5px of margin (that’s outside) on both sides (basically, if you want your gutters to be 10px wide, then each column should have 5px (or 1/2 the gutter’s) margin on both sides, and the max width of content is 680px, then each column would be: 680 + 10 and multiple columns would be simply <> * 690. I know this doesn’t exactly speak to Your Alegbra, but it might help you visualize it better.
Why would you like to use an equation that you (somehow) determined is the silver bullet to web design? Of course you can ‘easily’ solve this equation by dividing each side by your pixel dimension and setting them equivalent each other, but I’m not sure this would yield you anything besides another way of looking at x y a and b (unless you are good at linear algebra). If i were you i’d make your grid based on 8px. They are both divisible by 8. The point of grid design is not how many columns and gutters you have based on your content, but rather, applying content to an even grid. It’s about proportion, not amount.
I get this: y = (ax + bx + 168)/(a + b) here’s how: (x*a) + ((x-1)*b) = 512 (y*a) + ((y-1)*b) = 680 ax + b(x-1) = 512 ay + b(y-1) = 680 ax + b(x-1) + 168 = 680 ay + b(y-1) = 680 ax + b(x-1) + 168 = ay + b(y-1) ax + bx – b + 168 = ay + by – b ax + bx + 168 = ay + by ax + bx + 168 = (a + b)y (ax + bx + 168)/(a+b) = y since a and b are ‘constants’ (but variables in the programming sense), you can just plug them in and solve for y.
I would make some assumptions to bring you to actual possible answers… the first 2 are kinda implicit in your framing of the equations… 1) both objects are centrally aligned to a COLUMN-GUTTER-COLUMN-GUTTER-COLUMN structure 2) both objects “end” at the column, so therefore will always cover 1 more column than gutters (hence your x-1 and y-1) 3) (my initial assumption) there is only 1 column + 1 gutter either side of the narrower object, to bring it to the width of the wider one. This is a reasonable assumption as you would not expect to fit FOUR columns of information in the space. And that last assumption gives us: a+b = 84 and y=x+2 Both equations now reduce to the same thing: 84x = (512 – a) All the numbers have to be integers, therefore (512-a) has to be an exact multiple of 84. The only number that gives us sensible answers is 504 (i.e. 6*84). This gives us answers of x=7 and a = 8. a+b = 84, therefore your column width is now 8, and your gutter 76 (9 columns, 8 gutters). So g
My best answer I’ve found is 160px columns, 16px gutters. So 3 columns (3c + 2g) will be 512px. 4 columns (4c + 3g) will be 688px. You will have an extra 8px for the 680px content, but there is going to be some fudge room somewhere, since those two values (512 and 680) aren’t quite perfect. Algebra only got me so far. I got the final answer by trial and error with different values. And now, the MATH . . . From what I understand, you want a grid system that will be a good fit for 512px or 680px of content. I tried wrapping my head around the equations your proposed, but that’s no good. My first step was drawing a diagram so I could get a handle on the concepts. Next, I divided 512/680 to see what kind of ratio I might be able to work with. 512/680 = .7529. That’s pretty close to and even 3/4. So my drawing now looks like the 512 content will be 3 columns wide, the 680 content will be 4 columns wide. My equations are (c = column width, g = gutter width): 3c + 2g = 512 4c + 3g = 680 After
