How to create a dynamic grid using vue?

Question

What is the best way to create a grid dynamically with Vue?

I was thinking of using the v-for loop to generate cards on a page for X number of 'modules', but would like to arrange them in rows of 3.

eg

 Card | Card | Card
 Card | Card | Card

Answer 1

You can use CSS grid layout , make sure to check browser support .

We'll need to make the container a grid container using display: grid and use grid-template-columns .

You can create a component that accepts a number prop and then use it in the repeat() notation.

repeat({numberOfColumns}, minmax({minColumnSize}, {maxColumnSize}))

 new Vue({ el: "#app", data() { return { cards: [1, 2, 3, 4], numberOfColumns: 3, } }, computed: { gridStyle() { return { gridTemplateColumns: `repeat(${this.numberOfColumns}, minmax(100px, 1fr))` } }, }, methods: { addCard() { this.cards.push('new-card') }, }, }) Vue.config.productionTip = false; Vue.config.devtools = false; 

 .card-list { display: grid; grid-gap: 1em; } .card-item { background-color: dodgerblue; padding: 2em; } body { background: #20262E; padding: 20px; font-family: Helvetica; } #app { background: #fff; border-radius: 4px; padding: 20px; transition: all 0.2s; } ul { list-style-type: none; } 

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <div id="app"> Columns: <input v-model.number="numberOfColumns"> <ul :style="gridStyle" class="card-list"> <li v-for="(card, index) in cards" class="card-item"> {{ index + 1 }} </li> </ul> <button @click="addCard"> Add card </button> </div>