Vuetify 卡片网格与分隔线对齐

Question

我正在尝试使用 Vuetify 制作包含图像和标题的卡片网格。

我已经在一些示例的帮助下成功制作了一个网格并成功制作了这个（这是断点 XL）：

但问题是，如果屏幕变小，网格就不再是网格了，而是看起来像这样（这是断点 LG）：

我使用的是理由：space-between，但如果我使用 start，结果是：

我的目标是让网格与上面的 v-divider 对齐，并且在开始时也是合理的，没有 LG 断点第二行的尴尬间隙。

这是我的代码：

<v-container>
    <v-row justify="space-between">
      <v-col md="6" cols="12">
        <h1>Grid</h1>
      </v-col>

      <v-col md="6" cols="12">
        <v-text-field
          outlined
          dense
          hide-details
          :placeholder="$t('search')"
          prepend-inner-icon="mdi-magnify"
          :class="$vuetify.breakpoint.smAndUp ? 'mt-2' : ''"
        ></v-text-field>
      </v-col>
    </v-row>

    <v-row justify="space-between">
      <v-col cols="12">
        <v-divider></v-divider>
      </v-col>
    </v-row>

    <v-row :justify="$vuetify.breakpoint.smAndDown ? 'center' : 'start'">
        <v-col cols="auto" v-for="(item, index) in machines" :key="index">
          <v-hover v-slot="{ hover }">
            <v-card class="mb-4" :elevation="hover ? 5 : 2">
              <v-card-text>
                <v-img
                src="https://static.wikia.nocookie.net/bc87eadb-62dd-4748-bcb6-cc4f38594988"
                contain
                :width="$vuetify.breakpoint.lgAndUp ? '300' : '385'"
                height="250"
              ></v-img>
              </v-card-text>

              <v-card-actions>
                <v-btn text color="deep-orange">
                  Arthur Morgan
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-hover>
        </v-col>
    </v-row>
  </v-container>

Answer 1

像第二个v-row一样写下第一个v-row的条件：

<v-row :justify="$vuetify.breakpoint.lgAndUp ? 'space-between' : 'start'">

希望对您有所帮助。

Answer 2

我想，正确答案是：您不应该将v-col和v-row类中的弹性框用于这些目的。

In this question 你可以找到各种各样的答案。但大多数看起来像拐杖或导致意想不到的效果。

但是您可以使用 CSS Grid Layouts 来解决您的问题。

因此将您的行代码更改为：

<v-row :justify="$vuetify.breakpoint.smAndDown ? 'center' : 'space-between'" :class="getClassByScreenSize()">
  ...
</v-row>

然后创建一些 CSS 类使用网格布局 (fr unit explanation is here):

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

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

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

然后创建 getClassByScreenSize 方法，根据当前 vuetify 断点将类放入您的模板：

...
methods: {
  getClassByScreenSize() {
    if (this.$vuetify.breakpoint.xlOnly) {
      return 'five-cols'
    }
    if (this.$vuetify.breakpoint.lgOnly) {
      return 'three-cols'
    }
    if (this.$vuetify.mdOnly) {
      return 'two-cols'
    }
    return ''
  }
}

检查此 at CodePen。

Vuetify 卡片网格与分隔线对齐

Vuetify grid of cards aligned with a divider

html

css

grid

layout

vuetify.js