Adaptives Rasterlayout in der Vuetify-Projektliste

Question

Ich bin auf ein Problem gestoßen, das scheinbar häufig vorkommt, aber ich kann es lösen.

Ich habe eine API-Abfrage, die eine Liste von Objekten zurückgibt.

Ich möchte meine Seite als mit Inhalt gefülltes Kartenraster anzeigen.

Ich möchte, dass das Raster 5 Spalten hat und die Anzahl der Zeilen an die Anzahl der Elemente in der Liste angepasst wird.

Ich kann herausfinden, wie ich es umsetzen kann.

Zum Beispiel: Ich habe eine Abfrage, die

zurückgibt

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"}
]

Mein Raster besteht aus 7 Elementen, systematisch mit 5 Spalten und adaptiven Zeilen, zum Beispiel:

Wenn meine Abfrage beispielsweise 14 Elemente zurückgibt, sollte sich das Layout so anpassen, dass es wie folgt aussieht:

Der nächstgelegene Code, den ich bekommen konnte, ist.

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

Vielen Dank für Ihre Hilfe

Answer 1

如果你这样改变 v-row 和 v-col 声明就可以完成：

  
...

并使用 CSS 网格布局 Five-cols /a>：

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

示例CodePen