ホームページ  >  に質問  >  本文

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

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

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

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

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

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

例:

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

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

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

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

リーリー ###ご協力いただきありがとうございます###
P粉710478990P粉710478990263日前465

全員に返信(1)返信します

  • P粉143640496

    P粉1436404962024-01-30 00:16:19

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

    リーリー

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

    リーリー

    コードペン

    返事
    0
  • キャンセル返事