Reka letak grid penyesuaian dalam senarai projek Vuetify

Question

Saya menghadapi masalah yang nampaknya biasa, tetapi saya boleh mengatasinya.

Saya mempunyai pertanyaan API yang mengembalikan senarai objek.

Saya mahu memaparkan halaman saya sebagai grid kad yang dipenuhi dengan kandungan.

Saya mahu grid mempunyai 5 lajur dan bilangan baris akan disesuaikan dengan bilangan elemen dalam senarai.

Saya boleh memikirkan cara untuk melaksanakannya.

Contohnya: Saya mempunyai pertanyaan yang kembali

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

Grid saya terdiri daripada 7 elemen, secara sistematik dengan 5 lajur dan baris penyesuaian, contohnya:

Jika pertanyaan saya kembali sebagai contoh 14 elemen, reka letak harus disesuaikan untuk kelihatan seperti ini:

Kod paling dekat yang saya dapat ialah.

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

Terima kasih atas bantuan anda

Answer 1

Jika anda menukar v-row 和 v-col kenyataan seperti ini:

  
...

Dan gunakan susun atur grid CSS Five-cols/a>:

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

ContohCodePen