How would you make a liquid grid of elements with uniform size and margins in CSS?
The main problem I have is the margins. I feel that the obvious solution is to set the widths and margins to a percentage and be done with it. This doesn't work because the vertical margin is a percentage of the container's width. When the container resizes horizontally, the vertical spacing is off.
I have tried two methods. One with percentage margins and one with 'em' margins. Neither of them scale correctly. What can I do?
Alright, I found a solution. I wrapped each button in a container element. The outer container fits perfectly with percentages for width and height. Then, the inner element has a margin to add spacing between each button.
The margins are still dependent on the width of the body but at least the buttons are the correct size. Is there a more elegant solution out there?