Comment créer une grille dynamique en utilisant Vue ?

Question

Quel est le meilleur moyen de créer dynamiquement une grille avec Vue ?

Je pensais utiliser la boucle v-for pour générer des cartes sur une page pour X nombre de 'modules', mais j'aimerais les organiser en rangées de 3.

par exemple

 Carte | Carte | Carte
 Carte | Carte | Carte

Answer 1

Vous pouvez utiliser CSS grid layout, assurez-vous de vérifier la prise en charge par le navigateur.

Nous devrons faire du conteneur un conteneur de grille en utilisant display: grid et utiliser grid-template-columns.

Vous pouvez créer un composant qui accepte une prop de nombre et l'utiliser ensuite dans la notation repeat().

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

  Colonne : 

      {{ index + 1 }}

    Ajouter une carte