How to use algebra to solve web design grid issue?

October 23, 2008 6:56 AM

I have a super-complicated algebraic equation I (somehow) developed as the solution to developing appropriate grid-based web design that has me completely stumped...

The kicker here is that I need to use existing chunks of content with predefined widths of 680px wide, and 512px wide. I want a grid of equal columns and gutters that would accommodate both dimensions. To the best of my abilities, I've defined the problem as such:

(x*a) + ((x-1)*b) = 512
(y*a) + ((y-1)*b) = 680

where:

a= # of columns
b= # of gutters

x and y are simply the number of columns and gutters needed for each width.

Is this even solvable?

posted by fauxtoes to computers & internet (20 answers total)

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.
posted by judge.mentok.the.mindtaker at 7:09 AM on October 23, 2008

And of course for Y, just extend that idea in both directions.

There's a lot of buzz about "grid design" but it's bunk -- there does not need to be this much discussion about it.
posted by judge.mentok.the.mindtaker at 7:12 AM on October 23, 2008

Is this even solvable?

Solvable for what? You have two equations there, so you can eliminate one variable. That would mean you can define it in terms of x, y, and a, for example.
posted by burnmp3s at 7:13 AM on October 23, 2008

So... x and y are the numbers of columns and gutters, and a and b are also the numbers of columns and gutters? No, that's not solvable. (I think you mean one set is widths. If so, you've got four unknowns in two equations, which is still unsolvable.)

I agree with Judge Mentok: design for the larger piece. Anything that can accommodate the 680px item will handle the 512px item as well.
posted by flexiblefine at 7:16 AM on October 23, 2008

EDIT:
a= column width
b= gutter width

@judge - the two defined widths are just two pieces of the puzzle. The rest of the design is is flexible, but in order to accommodate, it would be helpful if both of these laid out nicely on a grid.

@burnmp3s - It is beyond my mathematical abilities to define this as a single equation. That's part of the problem. There may be more than one solution? I'd like to know if there are values for x,y, and a.
posted by fauxtoes at 7:19 AM on October 23, 2008

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.
posted by shownomercy at 7:20 AM on October 23, 2008

I could be wrong, but here goes anyway.

(x*a) + ((x-1)*b) = 512
(y*a) + ((y-1)*b) = 680

This simplifies to:

ax+bx-b = 512
ay+by-b = 680

Unknown values are 'a', 'b', 'x' and 'y'.

Basic algebra states that with a system consisting of 'z' unknowns, you must have 'z' equations describing the system.

Here you have 4 unknowns and only 2 equations. Hence it is not solvable.

However, if you make 'a' and 'b' [number of columns & gutters] as constant values, your problem reduces to 2 unknowns with 2 equations, and thus you can solve for 'x' and 'y' [number of columns and gutters needed].

Or vice versa, if you make 'x' and 'y' constant values.

Good luck!
posted by the_ancient_mariner at 7:28 AM on October 23, 2008

Here's your answer, where H=512 and W=680 are your dimensions:

a= ( H(y-1) -W(x-1))/(x(y-1)-y(x-1))

b=(xW-yH)/(x(y-1)-y(x-1))

You can now plug integer values into x and y and see if you get a and b values you can live with.

Aren't x and y related though? I'm not clear on what gutters are, but the number of gutters can't be independent of the number of columns if they all live on the same page. If they are, you can eliminate one of them and find ideal grid dimensions according to your system for x number of columns.
posted by ghost of a past number at 7:34 AM on October 23, 2008

In fact, let's be sensible and rewrite this with H=680 for height and W=512 for width:

a= (W(y-1) -H(x-1))/(x(y-1)-y(x-1))

b=(xH-yW)/(x(y-1)-y(x-1))

It appears I am looking at your grid sideways.
posted by ghost of a past number at 7:39 AM on October 23, 2008

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.
posted by stubby phillips at 7:41 AM on October 23, 2008

Aren't x and y related though? I'm not clear on what gutters are, but the number of gutters can't be independent of the number of columns if they all live on the same page.

I think x = number of colums = number of gutters + 1, when a 512 width is used, and y = number of colums = number of gutters + 1, when a 680 width is used.

There may be more than one solution? I'd like to know if there are values for x,y, and a.

Yeah, there are a lot of solutions. You can pick completely random numbers for x and y, and there will still be values for a and b that will satisfy your equations. If you add more equations, you see that there are less values that will work. For example, if you make a rule that a = 4b (a column is ten times wider than a gutter) then you can pick a number for x and there will be exactly one value for y, a, and b.
posted by burnmp3s at 7:47 AM on October 23, 2008

Err, four times wider.
posted by burnmp3s at 7:47 AM on October 23, 2008

if you make a rule that a = 4b...

y = (ax + bx + 168)/(a + b)
y = (4bx + bx + 168)/(4b + b)
y = (5bx + 168)/ 5b

or

y = x + 168/5b
posted by stubby phillips at 7:53 AM on October 23, 2008

There are two equations in either two or four unkowns (it's a little unclear if a, b are known constants or not). With that said, the best answer is that you have the two simplified equations

(a + b)x - b = 512
(a + b)y - b = 680

Thus, if a, b are known fixed constants then you have that

x = (512 + b)/(a + b)
y = (680 + b)/(a + b)

Well, this is true regardless of whether or not a, b are known.

If a, b are not known, then this is not even a linear system. It also would have infinitely many solutions. My suggestion? Use the form above, try values for a, b. See what pops out.
posted by vernondalhart at 7:59 AM on October 23, 2008

i think it turns out nicer if a = 3b

y = (ax + bx + 168)/(a + b)
y = (3bx + bx + 168)/(3b + b)
y = (4bx + 168)/ 4b
y = x + 42b

or if a = 2b:

y = x + 56b
posted by stubby phillips at 8:00 AM on October 23, 2008

This does not directly answer your question, but here are a couple of websites you might like to play around with for reckoning grids and generating the CSS for them:

Grid designer
Blueprint CSS generator
posted by adamrice at 8:32 AM on October 23, 2008

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 given the constraints of the sizes, and the central alignment, you can't get a useable grid.

If we change my assumption and allow 2 "columns+gutters" on one side (leaving only 1 on the other), such that a+b = 56 and y=x+3, then the answer drops out to... gutter 48, column 8 (13 columns, 12 gutters).

If we allow 1 "column + gutter" on one side only (and the 2 objects lined up on the other), then a (column width) still drops out to 8 (probably some reason it comes out the same every time), with a gutter of 160 (5 columns, 4 gutters)

Any more columns between the big and small objects, and your column size will become unusable, so no point testing (e.g. with 4 columns, column + gutter = 42pixels)

So... in conclusion... as it stands it can't be done with reasonable results. The smaller object will have to be aligned to a gutter (which means changing the first equation), or to nothing at all...

Phew!
posted by saintsguy at 9:23 AM on October 23, 2008

Correction, sorry:

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.

Should be:

Both equations now reduce to the same thing: 84x = (596 - a)

All the numbers have to be integers, therefore (596-a) has to be an exact multiple of 84. The only number that gives us sensible answers is 588 (i.e. 7*84). This gives us answers of x=7 and a = 8.
posted by saintsguy at 9:32 AM on October 23, 2008

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 doing the algebra, the answers I get are c = 176, g = -8. That won't work because we can't have a negative gutter width. From here, it was basically trial and error. I noted that 170 seemed to be a good number to hover around, since both values are close in being multiples of 170:

512 / 3 columns (no gutters) = 170.66px
680 / 4 columns (no gutters) = 170px exactly

I then figured that the total width of a column and gutter (c+g) would be greater than 170. From there I used value to think about what the break down between column and gutter width would be

170 * 3 = 510 -> 510 - 512 = -2 (can't have negative gutter)
172 * 3 = 516 -> 516 - 512 = 6 (too thin of a gutter)
174 * 3 = 522 -> 522 - 512 = 10 (still too thin)
176 * 3 = 528 -> 528 - 512 = 16 (that could work!)

column with would be 176 - 16 = 160

If I plug that into the equations above, I find a nice match

( c = 160; g = 16 )
3c + 2g = 512
4c + 3g = 688

With those two answers, I feel like that's the best combination I'll get. Sure, I could use other more complex layouts, but that could possibly over complicate the situation. This result uses a minimal amount of columns and the answers come pretty darn close to what you're looking for.

I hope I did that right.
posted by nemoorange at 9:54 AM on October 23, 2008

wow. very thorough.

Nemoorange is onto what I'm getting at. Sorry I wasn't able to more clearly explain the issue...

thanks all for helping me make this much more complicated than it probably should have been.
posted by fauxtoes at 11:04 AM on October 23, 2008