title: Position buttons in container as a grid using CSS
body: <p>I have a container with multiple anchor tags styled as buttons (it could have more or less buttons):</p>
  
  <pre><code>&lt;div class="menu-container"&gt;
      &lt;div class="button-container"&gt;
         &lt;a href="#/Action1" class="button"&gt;Action1&lt;/a&gt;
         &lt;a href="#/Action2" class="button"&gt;Action2&lt;/a&gt;
         &lt;a href="#/Action3" class="button"&gt;Action3&lt;/a&gt;
         &lt;a href="#/Action4" class="button"&gt;Action4&lt;/a&gt;
         &lt;a href="#/Action5" class="button"&gt;Action5&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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 <code>display:inline-block</code> and <code>float:left</code> but without success.</p>
  
  <p>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...</p>
  
  <p>What I'm trying to achieve is something like:</p>
  
  <p><img src="https://i.stack.imgur.com/bT1q2.png" alt="enter image description here"> </p>