Wie auszurichten Karten in verschiedenen Reihen

Question

Ich versuche, so etwas zu tun: https://nomadlist.com/

Reihen von 3 Elementen (Karten?) Von oben nach unten. Gleiche Größe, perfekt ausgerichtet.

Ich bin mit Lenker und Bulma CSS, und die Kartenkomponenten und tun dies:

<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> 

Und es funktioniert teilweise. Jedes der Elemente erhält eine eigene Karte. Aber das druckt sie alle in der gleichen Zeile. Und mit verschiedenen Größen.

Answer 1

Wenn ich Sie richtig verstehe, sollten Sie den Modifikator is-multiline mit der rechten Spalte verwenden, wenn Sie 3 in einer Zeile möchten, verwenden Sie dann Spalte "is-4".