Bulma - why all columns are on one line?

Question

I use Bulma with VueJS when I use v-for, all columns are on one line, I tried to addis-4, then the column width changes but they are still on one line

<div class='columns'>
<div class='column' 
v-for='item in weatherData.list' 
v-bind:key='item.data'>

<div class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
     </figure>
    </div>
   <div class="card-content">
               ...
    </div>
   </div>
   </div>
   </div>

Can anyone explain to me how it works?

Thanks!

EDIT

html output : https://jsfiddle.net/6rfo3dvL/2/

Answer 1

If you want columns to wrap you need to add the .is-multiline modifier to the .columns class. More information here

fiddle

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<div class='columns is-multiline'>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <figure class="image is-4by3">
          <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
        </figure>
      </div>
      <div class="card-content">

      </div>
    </div>

  </div>
</div>