HTML how to create a matrix of buttons

I want to take a step back here. I've attached an example.

fluid grid - i noticed that each grid container applies to what i would describe as a single row. So with this technique you are required to create a new container for each row?
buttons - in my example i have 4 buttons. I want 2 cols 2 rows. I want the buttons to equally fill the browser. Right now the fluid grid handles the horizontal layout. How do I get those buttons to size their heights equally to fill the browser?
buttons - right now i've hard coded the buttons into the markup. the final design will read the buttons from a db table where i'll use javascript to create the markup. So for example the user has 4 buttons designed and would like buttons displayed 2 cols x 2 rows. The attached example illustrates this. Now what if the user has 9 buttons defined and would like them displayed 3 cols x 3 rows. Again the browser screen would be equally divided up 3x3 and each of the 9 buttons would be the same height and width. Based on this scenario is fluid grids and media queries the best technique?
example https://www.dropbox.com/sh/t6sd2lzdvl8fdyx/AADyRZzbHW7ymaLgIo2diRaba?dl=0
glenn_rAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
As far as I am aware you have two options

1. Flexbox
2. Javascript / JQuery

2 Gives you wider compatibility with older browsers - Flexbox support on IE is only really from IE11.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kyle HamiltonData ScientistCommented:
This may be more than what you're looking for. I wrote a jquery plugin (some time ago). See link below. If you hover your cursor towards the top of the browser window, you should get a bunch of options slide down. Enter the number of boxes into the "Generate Boxes" field, and click the "draw grid" button on the right. If you put in a number that is not a perfect square, the layout will try to maximize the screen space, which results in a configuration as close to square as possible. It's scalable with the browser window, but not "responsive" in the traditional sense, ie, the layout doesn't change, it just scales.

http://candpgeneration.com/toys/box-grid.html

If you don't care about older IE, flexbox may be a better option
0
Julian HansenCommented:
There is also the jQuery library Isotope (http://isotope.metafizzy.co/) which has a quite a rich set of features if you want to go the scripting route.

It is quite extensively used and has a strong following.
0
sajayj2009Commented:
If you can use bootstrap, it is easy to use...
0
Kyle HamiltonData ScientistCommented:
@sajayj2009, I am not aware of a feature in bootstrap that would do what @glenn_r is looking for. But if there is a bootstrap solution for this, I would love to see it.
thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.