Menu icon Foundation
Best way to get 2x2 grid of square text buttons

1389996043171 1

Hi, I'd like to get your ideas on the best way to get something similar to the attached image with Foundation...

I'd like the boxes to all be the same height and width. I'd like to vertically center the text links within.

Thanks very much for any ideas!

buttongrid

1389996043171 1

Hi, I'd like to get your ideas on the best way to get something similar to the attached image with Foundation...

I'd like the boxes to all be the same height and width. I'd like to vertically center the text links within.

Thanks very much for any ideas!

Karl Ward over 5 years ago

Per example, it would not make much difference if you used the grid or the block-grid to create the above.
http://foundation.zurb.com/docs/components/grid.html
http://foundation.zurb.com/docs/components/block_grid.html

The width would be automatic, but the height of each element would need to be set through custom CSS. If the text inside did not break into multiple lines, the height would always be the same for all boxes anyway.

You could set the height as a % of the width, so that it is symmetric across all screens:

.element { padding-bottom: 50%; }

... or you could set a fixed height

.element { height:200px; }

... or you could simply use padding on the element to create the height, which would also solve vertical center-alignment. This would likely be the easiest solution, but it would not make boxes equal height if some have line-breaks.

.element { padding:40px 0; }

Unfortunately, it gets tedious if you want exact vertical center-alignment regardless of the height of the content inside the element. There is one method display: table-cell; vertical-align:middle;, but it is a bit clumsy. Another method is position: absolute; top: 50%; margin-top: -10px; ... ehm.

If I was you, I would use a fixed height for each element, which makes sure they are always the same height. Then I would add padding-top to approximately align the average content vertically. Elements with more than one line will still align to the padding, but an acceptable compromise for a solution that works.

Rafi Benkual over 5 years ago

You can use the Equalizer for this now http://foundation.zurb.com/docs/components/equalizer.html
Requirement: Foundation 5.1.1

Bernardo Medeiros Gomes about 5 years ago

The equaliser solution is not working for me on Foundation 5.2.2.
But I'm probably doing something wrong.
:/