Loop through parent divs children and close that div and open a new div continuing the loop

Question

I'm using Bulma as my framework and I noticed the columns don't break when they reach the count of 12. So this is what I want to happen:

1. Get the parent divs children count/length
2. If the child count is greater than 3 close the div and start a new div
3. Continue doing this until all data has been looped through

I'm looping on an array object to populate the information for column is-4

Example

<div class="columns">
  <div class="column is-4"></div>
  <div class="column is-4"></div>
  <div class="column is-4"></div> <--- 3rd child
</div> <--- close the div
<div class="columns"> <--- start new parent div
  <div class="column is-4"></div> <--- continue looping through the content
  <div class="column is-4"></div>
  <div class="column is-4"></div>
</div>

Vue Code

<template>
  <div class="container">
    <div class="columns">
      <div v-for="(coffee, i) in collection" :key="i" class="column is-4">
        <div class="card">
          <div class="card-content">
            <h2 class="title">{{ coffee.title }}</h2>
          </div>
          <footer class="card-footer">
            <router-link :to="{ path: '/collections/' + coffee.urlTitle }" class="card-footer-item">View Details</router-link>
            <p class="card-footer-item">
              From ${{ coffee.size.twelveOz }}
            </p>
          </footer>
        </div>
      </div>
    </div>
  </div>
</template>

Answer 1

You need to use the is-multiline class build into Bulma. Then you don't have to worry about wrapping lines, they take care of it for you:

<div class="columns is-multiline">

Check out their documentation on how it works.

And here is a working demo: https://codepen.io/egerrard/pen/rqpEEK