Solution 1 :

The easy way would be to wrap your buttons in a div, set max-width and use flexbox. That is because you also explicitly set the width and height of each button which then makes sense to use explicit width on a parent div as well.

Have a look here.

Hope it helps

Solution 2 :

I am not sure what did you try (as you mentioned in comments).

As the div is block displayed element it will take full width of container. So remaining content will be pushed on to next line.

   <button>Button 1</button>
   <button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>

Problem :

I have 4 buttons (example):

<button> <br>

They should be 2 rows of buttons with 2 buttons each, arranged in a perfect square of buttons (the buttons are 130px x 130px)
Instead, I need to use 8 <br>‘s to create 2 rows of buttons, and there is a large gap which ruins the perfect square.
If I use only 7 <br>‘s, I get 2 semi-rows of buttons, where the rows are just short of not touching corners
How could I fix this?


Comment posted by Vaibhav

Use 2 wrapper div, add 2 buttons in a div

Comment posted by DaveRainbowin

did that, didn’t work and has the exact same effect…

Comment posted by DaveRainbowin

Thank you. Sorry, the html was acting really weird and I couldn’t think how to fix it (the 4th button would be slightly downward from the rest of the buttons for some reason?)

Comment posted by Jakub A Suplicki

It is all good, as long as we could make it work. Is there still an issue despite the example that I have given, that you might still need help with? (make sure there are no additional

Comment posted by DaveRainbowin

No, it all works fine. Thank you! I need to read up on more CSS and find out what a flexbox is…

Comment posted by Jakub A Suplicki

Great to hear. Indeed it is a good idea to learn more about