Vuetify 图像网格答案

【问题标题】：Vuetify grid of imagesVuetify 图像网格
【发布时间】：2019-10-03 13:55:02
【问题描述】：

我有一个图像 URls 数组（长度在 0 到 25 之间），我想以响应方式在 1-2 列宽的网格中显示它们（如果在宽屏幕上显示为 2 列，如果在宽屏幕上显示为 1 列）在移动设备等上）。我有一个 vue.js 应用程序，并且正在使用 Vuetify 材料设计系统。

如何设置它，以便在宽屏幕上每 2 张图像自动创建一个新行？我添加了“行换行”属性，但认为它不起作用。到目前为止，这是我的代码：

<v-container fluid grid-list-md>
            <v-layout row wrap>
                <v-flex md6>
                    <v-card v-for="gif in results">
                        <v-img :src="gif.images.fixed_height_small.url" height="200px"></v-img>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-container>

【问题讨论】：

标签： vuetify.js

【解决方案1】：

查看此文档。 Vuetify 有一个 12 点的网格系统。

v-1.5 https://v15.vuetifyjs.com/es-MX/framework/grid
v-2.1.0 https://vuetifyjs.com/es-MX/components/grids

包含 5 种类型的媒体断点，用于针对特定的屏幕尺寸或方向

你必须重新定位for循环，使用断点xs和md

 <!-- v-1.5 -->
 <v-container fluid grid-list-md>
      <!-- xs = 600px full screen (12) -->
      <!-- md = 600px or more. half of the screen (6) -->
      <v-layout row wrap>
          <v-flex xs12 md6 v-for="gif in results">
              <v-card >
                  <v-img :src="gif.images.fixed_height_small.url" height="200px"></v-img>
              </v-card>
          </v-flex>
      </v-layout>
  </v-container>

【讨论】：