title: How to align cards in different rows
body: <p>I'm trying to do something like this: <a href="https://nomadlist.com/" rel="nofollow noreferrer">https://nomadlist.com/</a></p>
  
  <p>Rows of 3 elements (cards?) Going from top to bottom. Same size, perfectly aligned.</p>
  
  <p>I'm using Handlebars and Bulma CSS, and the card components and doing this:  </p>
  
  <pre><code>&lt;div class="columns"&gt;
      {{#each serverElements}}
      &lt;div class="column"&gt;
        &lt;div class="card"&gt;
        &lt;header class="card-header"&gt;
          &lt;p class="card-header-title"&gt;
            {{this.title}}
          &lt;/p&gt;
          &lt;a class="card-header-icon"&gt;
            &lt;span class="icon"&gt;
              &lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;
            &lt;/span&gt;
          &lt;/a&gt;
        &lt;/header&gt;
        &lt;div class="card-content"&gt;
          &lt;div class="content"&gt;
            {{this.body}}
            &lt;a&gt;@bulmaio&lt;/a&gt;. &lt;a&gt;#css&lt;/a&gt; &lt;a&gt;#responsive&lt;/a&gt;
            &lt;br&gt;
            &lt;small&gt;this.createdAt&lt;/small&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;footer class="card-footer"&gt;
          &lt;a class="card-footer-item"&gt;Save&lt;/a&gt;
          &lt;a class="card-footer-item"&gt;Edit&lt;/a&gt;
          &lt;a class="card-footer-item"&gt;Delete&lt;/a&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
        {{/each}}
    &lt;/div&gt;
  </code></pre>
  
  <p>And it partially works. Each of the elements gets its own card. But this prints them all on the same row. And with different sizes.</p>