How to align cards in different rows

Question

I'm trying to do something like this: https://nomadlist.com/

Rows of 3 elements (cards?) Going from top to bottom. Same size, perfectly aligned.

I'm using Handlebars and Bulma CSS, and the card components and doing this:

<div class="columns">
    {{#each serverElements}}
    <div class="column">
      <div class="card">
      <header class="card-header">
        <p class="card-header-title">
          {{this.title}}
        </p>
        <a class="card-header-icon">
          <span class="icon">
            <i class="fa fa-angle-down"></i>
          </span>
        </a>
      </header>
      <div class="card-content">
        <div class="content">
          {{this.body}}
          <a>@bulmaio</a>. <a>#css</a> <a>#responsive</a>
          <br>
          <small>this.createdAt</small>
        </div>
      </div>
      <footer class="card-footer">
        <a class="card-footer-item">Save</a>
        <a class="card-footer-item">Edit</a>
        <a class="card-footer-item">Delete</a>
      </footer>
    </div>
    </div>

      {{/each}}
  </div>

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.

Please try giving display:inline-block to your card elements — Hema Nandagopal, Jun 30 '17 at 20:42
I don't think there is any magic to the site you referenced. The items are each 33.3% wide and have a fixed-height. — 76484, Jun 30 '17 at 20:47
SO is here to help with markup you wrote but SO is not here to write markup for you. The HTML is not everything we need to see from you. — Rob, Jun 30 '17 at 21:57

score 1 · Answer 1 · answered Jul 17 '17 at 18:39

1

If i understand you right, You sould use the is-multiline modifier with the right column, if you want 3 in a row, then use `column is-4'.

answered Jul 17 '17 at 18:39

GabMic

1,422
1
20
37

How to align cards in different rows

1 Answers1