Disposition de grille adaptative dans la liste de projets Vuetify

Question

J'ai rencontré un problème qui semble courant, mais je peux le surmonter.

J'ai une requête API qui renvoie une liste d'objets.

Je souhaite afficher ma page sous forme d'une grille de cartes remplie de contenu.

Je souhaite que la grille ait 5 colonnes et que le nombre de lignes s'adapte au nombre d'éléments dans la liste.

Je peux comprendre comment le mettre en œuvre.

Par exemple : j'ai une requête qui renvoie

items[
   {"id":1,"title":"title1,"description":"description1"}
   {"id":2,"title":"title2,"description":"description2"}
   {"id":3,"title":"title3,"description":"description3"}
   {"id":4,"title":"title4,"description":"description4"}
   {"id":5,"title":"title5,"description":"description5"}
   {"id":6,"title":"title6,"description":"description6"}
   {"id":7,"title":"title7,"description":"description7"}
]

Ma grille est composée de 7 éléments, systématiquement avec 5 colonnes et lignes adaptatives, par exemple :

Si ma requête renvoie par exemple 14 éléments, la mise en page devrait s'ajuster pour ressembler à ceci :

Le code le plus proche que j'ai pu obtenir est.

<v-container class="mt-2">
      <h1>Top Rated views</h1>
      <v-row v-for="n in gridDivider" :key="n" class="n === 1 ? 'mb-6' : ''">
        <v-col v-for="(item,index) in Items" :key="index">
          <v-card class="mx-auto" max-width="300">
            <v-img
              class="white--text align-end"
              height="200px"
              src="item.avatar"
            >
              <v-card-title>anything as text</v-card-title>
            </v-img>

            <v-card-subtitle class="pb-0"> Number 10 </v-card-subtitle>

            <v-card-text class="text--primary">
              <div>Whitehaven Beach</div>

              <div>Whitsunday Island, Whitsunday Islands</div>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>

Merci pour votre aide

Answer 1

Si vous modifiez la déclaration v-row 和 v-col comme ceci :

  
...

Et utilisez Mise en page de grille CSS<创建 CSS 类 Cinq colonnes/a> :

.five-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

ExempleCodePen