Vuetify v-card 像拼图一样贴合（砌体布局）

Question

我有一个包含 6 个或更多 v-card 的页面。

有没有办法像拼图一样适合它们？我想删除第一行和第二行小 v-card 之间的空白。

现在是这样的：

Answer 1

没有办法（还）通过 Vuetify API 解决这个问题。相关 GithubFeature请求：

[功能请求] 砌体布局 #4091

Masonry.js 的解决方案

使用 Javascript 插件。例如masonry.js。

Codepen 演示： https ://codepen.io/ezra_siton/pen/gOpZqKr

Masonry.js 和 vuetify 网格 - 代码片段

<!-- https://vuetifyjs.com/en/ -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
<v-app>
  <v-content>
    <v-container>
      <v-row class="masonry">
        <v-col class="child" cols="12" sm="6">
          <v-card class="pa-2" color="pink darken-1" dark>
            <v-card-title>Card 1</v-card-title>
            <v-card-text>
              The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham. One of three columns
              The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
              </v-card-text>
          </v-card>
        </v-col>
        <!-- card 2-->
        <v-col class="child" cols="12" sm="6">
          <v-card class="pa-2"  color="orange darken-3" dark>
            <v-card-title>Card 2</v-card-title>
            <v-card-text>
              One The standard chunk of Lorem Ipsum used since the 1500s is 
              </v-card-text>
          </v-card>
        </v-col>
        <!-- card 3 -->
        <v-col class="child" cols="12" sm="6">
          <v-card class="pa-2" color="#385F73" dark >
            <v-card-title>Card 3</v-card-title>
            <v-card-text>
              The chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
              </v-card-text>
          </v-card>
        </v-col>
        <!-- card 4 -->
        <v-col class="child" cols="12" sm="6">
          <v-card class="pa-2" color="blue darken-4" dark >
            <v-card-title>Card 4</v-card-title>
            <v-card-text>
              The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
              </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>

<script>
 new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  mounted: function () {
      // Code that will run only after the
      // entire view has been rendered
      var msnry = new Masonry( '.masonry', {
        // options
        itemSelector: "[class*='col-']",
      });
  }
})
</script>

如何（少于 1 分钟）

步骤 1/3：正文前的 CDN

直接链接到unpkg上的 Masonry 文件。

<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>

- 或 -使用npm安装：npm install masonry-layout 并使用import import Masonry from 'masonry-layout'

步骤 2/3：HTML - 设置容器元素

Masonry 使用一组子项处理容器网格元素。

将class(或id)添加到您的 flexbox 网格（设置为container element）。 masonry在这个例子中（使用任何你想要的名字）。

<v-row class="masonry">
  <v-col class="child" cols="12" sm="6">
   <v-card class="pa-2" outlined >
..rest of the code

步骤 3/3：使用 vanilla js 初始化

new Masonry( elem, options )

3.1：使用.masonry作为容器元件的参数。

3.2：内部选项对象 - 设置itemSelector为： itemSelector: "[class*='col-']"

[class*='col-']：通配符选择器（选择任何类包含col。例如：.col-6-or- .col-md-2==> DRY // 清洁解决方案）

我在 vue mount()生命周期钩子中加载脚本（在组件添加到 DOM 之后）。

 new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  mounted: function () {
      // Code that will run only after the
      // entire view has been rendered
      var msnry = new Masonry( '.masonry', {
        // options
        itemSelector: "[class*='col-']",
      });
  }
})

文档：

• masonry.js 文档： https ://masonry.desandro.com/
• Vuetify 网格系统文档： https ://vuetifyjs.com/en/components/grids/

自定义 CSS 解决方案

另一种选择是使用 flexbox/Grid 和自定义 CSS，在我看来，对于这样一个简单的任务来说，这是太多的代码和想法。相关文章：

https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/