using result of linear equation to find number of columns

renevanderlende · 2020-02-13 03:08:16

Hi everyone,

This is not a request for coding help, but a genuine math problem used for:

Writing a tutorial for Codepen (non commercial CSS/HTML developers site) on using 'columns' in CSS.
It shows how to one can use "y = mx + b" to solve a variety of variable size, width and height problems,
saving time and amount of code.

I am using "y=mx+b" for points p1(320,80) and p2(1920,240) => y = 0.1x + 48, meaning:
at 320 we have column width 80 (4 columns)
at 1920 we have column width 240 (8 columns)

So, in this case "y = 0.1x + 48" yields a column width at any given screen width.

X-values 320 and 1920 are given
Y-values 80 and 240 were derived by dividing 320 and 1920 by 4 and 8 respectively.

Given result '0.1x + 48', how do I find the exact column width for 5, 6 and 7 columns
without drawing a xy-graph and find the answer visually (like with a little tool I created on
GeoGebra ERS linear equations (ERS - easy responsiveness series)

In CSS this would look something like:

column-width: calc(0.1 * 100vw + 48px); /* 100vw = 100% of current viewport width */

Unfortunately in CSS it is not possible to substitute 'column-width' like:

column-count: calc(column-width / some-equation);

And calc() only accepts +,-,*,/ as math operators

Thanks for your help!!

Last edited by renevanderlende (2020-02-13 03:29:34)

Bob · 2020-02-13 07:08:33

hi renevanderlende

I've applied a little algebra. You have y = 0.1x + 48 and also number of columns = x/y

Let's say you want 7 columns.

x/y = 7 => x = 7y

Replace x in the equation

y = 0.1 times 7y + 48 = 0.7y + 48 => 0.3y = 48 => y = 48/0.3 = 480/3 = 160

So the column width is 160 and x = 7 x 160 = 1120

Test to see if this works

If x = 1120 then y = 0.1x + 48 = 112 + 48 = 160. And the number of columns = x/y = 1120/160 = 7 as required.

Hope that's what you wanted.

Bob

renevanderlende · 2020-02-13 11:13:56

Hi Bob,

Thanks a bunch! Nice clarification, now that I see the solution it seems so obvious. Been staring at the puzzle for hours, but no lightbulbs came on flashing.

In the mean time I added the line to my tool (new link, purple line) and noticed that for every 20x there is a 2y skip starting at (0,48) then (20,50), (40,52), (60,54) and so on. Knowing this, is there an alternate way to calculate 'column-count' and 'column-width' instead of '0.1x + 48'? (Yes, I genuinely s u c k at this!)

BTW x is always known (100vw, current browser width in pixels)

Arghh: column-count = 100vw / (0.1 * 100vw + 48) = 8 for x=1920 => 1920 / (192 + 48) = 8

Sorry, never mind the above question, I am caught in a bit of cyclic reasoning....ing....ing....ing

Last edited by renevanderlende (2020-02-13 11:51:22)

Math Is Fun Forum

#1 2020-02-13 03:08:16

using result of linear equation to find number of columns

#2 2020-02-13 07:08:33

Re: using result of linear equation to find number of columns

#3 2020-02-13 11:13:56

Re: using result of linear equation to find number of columns

Board footer