[Math] How to calculate the size of a square block and the number of rows and columns needed to fit a known number of blocks on a page of known size

geometry

I am a web developer and have a problem to solve that I thought might be suitable on here…

I am developing an app that will be used on a range of phones and tablets all with different screen sizes. One of the pages of this app will show a grid full of square buttons. The number of buttons to show will change each time the app is used. I want to fill the page as much as possible with the buttons and space them evenly on the page in a grid. The page will always be in landscape format (wider than it is high – sorry to state the obvious).

So my question is this – how can I calculate

1) The size of the square buttons
2) The number of rows
3) The number of columms
4) The distance between each button so they are spaced evenly

given that when the app loads i will know

a) The width of the screen
b) The height of the screen
c) The number of buttons to show

Until the app loads I will not know any of these values.

The number of buttons is likely to be in the region of 60 or so. SO for example if I have 60 buttons to show on an phone with width of 480 pixels and height of 270 pixels, I will show 10 columms and 6 rows, each block will be about 35 pixels square and I will space them out by 10 pixels. My grid will thus be (10*35)+(10*10) = 450 wide and (6*35)+(6*10) = 270 high.

Best Answer

Note that if your grid is $6 \times 10$, you only have $5 \times 9$ gaps, so the resulting grid is $440 \times 260$. Otherwise your work is fine. There is no magic in choosing the size of the square, the size of the gap, and the arrangement. If your grid is $w$ squares wide, $h$ squares high, squares have a side of $s$, and the gap is $g$, the grid will occupy $(ws+(w-1)g) \times (hs+(h-1)g)$ pixels. Pick the constants so it looks good to you.