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): ``` ``` 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:

Accepted Answer

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.

Position buttons in container as a grid using CSS

Solution

Problem