Position buttons in container as a grid using CSS

Question

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:

Answer 1

You need to give the links a width and height in addition to float or inline. Also, you need to define a width for the parent element, so that you can define where they can 'float' to.

.button-container {
    width: 520px;
    background: gray;
    overflow-y: auto;
}

.button-container > a {
    width: 100px;
    height: 100px;
    float: left;
    background: lightgray;   
    margin: 15px;
}

Here is an implementation with jsfiddle

Next time try to include an example with fiddle so we can understand what you have already tried and where the code could have gone wrong.