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

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.

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

I have 4 buttons (example):

<button>
<button> <br>
<button>
<button>

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?