Vuetify プロジェクト リストのアダプティブ グリッド レイアウト

Question

よくあると思われる問題に遭遇しましたが、それは克服できます。

オブジェクトのリストを返す API クエリがあります。

ページをコンテンツが詰まったカードのグリッドとして表示したいと考えています。

グリッドに 5 つの列があり、行数がリスト内の要素の数に適応するようにしたいと考えています。

実装方法はわかりました。

例:

を返すクエリがあります。 リーリー

私のグリッドは 7 つの要素で構成されており、体系的に 5 つの列と適応行が含まれています。例:

たとえばクエリが 14 個の要素を返した場合、レイアウトは次のように調整する必要があります:

私が取得できる最も近いコードは次のとおりです。

リーリー ＃＃＃ご協力いただきありがとうございます＃＃＃

Answer 1

これは、v-row および v-col 宣言を次のように変更すると実行できます。

リーリー

そして、 CSS グリッド レイアウト Five-cols /a> を使用します:

リーリー

例コードペン