Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

glenn romaniuk
glenn romaniuk
33,029 Points
Posted by glenn romaniuk
glenn romaniuk
33,029 Points

Advice on how to create a matrix of buttons

I have a project where i need to display a different number of buttons per page based on the device its rendering on. Could be a tablet or desktop. For example on the tablet it will display 4 buttons (2 rows 2 cols) on the desktop it will display 9 buttons (3 rows 3 cols). The buttons and their captions will be read from a DB. The buttons fill the entire body. So the buttons need to be divided equally vertically and horizontally in the available browser.

What html element or technique do you suggest i use?

2 Answers

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

CSS Media Queries

Jacob Mishkin
Jacob Mishkin
23,118 Points

agreed.

glenn romaniuk
glenn romaniuk
33,029 Points
glenn romaniuk
glenn romaniuk
33,029 Points

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

  1. 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?

  2. 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?

  3. 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