Position buttons in container as a grid using CSS

I have a container with multiple anchor tags styled as buttons (it could have more or less buttons):

<div class="menu-container">
    <div class="button-container">
       <a href="#/Action1" class="button">Action1</a>
       <a href="#/Action2" class="button">Action2</a>
       <a href="#/Action3" class="button">Action3</a>
       <a href="#/Action4" class="button">Action4</a>
       <a href="#/Action5" class="button">Action5</a>
    </div>
</div>

How ca I style this using CSS to be able to have those buttons listed as a grid with 4 columns max? I tried with display:inline-block and float:left but without success.

I know that I need to fix a width for the container but I'm not able to but all anchor tags inside the container. And this must be dinamic as is could have more or less buttons...

What I'm trying to achieve is something like: