Как я могу сделать мою сетку изображений в VueJS?

Question

У меня есть картинки по вертикали и горизонтали, я хотел сделать макет сетки водопад / каменная кладка / писк, я обнаружил, что возможно сделать сетку "стек", но я пробовал много разных кодов, и я до сих пор не сделал удалось сделать это, потому что я хочу реализовать это в моем существующем коде (и я слишком свеж, чтобы сделать это). Может быть, есть более простой способ сделать это? Заранее спасибо

<template >
  <v-container
    fluid
    grid-list-xs
    text-xs-center
    fill-height
    max-height: 100vh;
    class="product"

  >
    <v-layout align-center justify-center row wrap class="container">
      <v-flex xs10 sm6 md4 lg3 class="mr-2 mb-2" v-for="(obj,key) in portfolio" :key="key">
        <v-hover>
          <v-card flat slot-scope="{ hover }" class="mx-auto" color="transparent">
            <v-img  class="image" v-bind:src="obj.img">
              <v-expand-transition>
                <div
                  v-if="hover"
                  class="d-flex transition-fast-in-fast-out grey darken-4 v-card--reveal display-3 white--text"
                  style="height: 100%;"
                >
                  <h4>{{ obj.title }}</h4>
                </div>
              </v-expand-transition>
            </v-img>
          </v-card>
        </v-hover>
      </v-flex>
    </v-layout>
  </v-container>
</template>

Answer 1

Вам, вероятно, понадобится v-layout верхнего уровня и v-flex.

Попробуйте это так:

<template>
  <v-layout justify-center>
    <v-flex xs12>
     <v-card>
        <v-container
          fluid
          grid-list-xs
        >
          <v-layout row wrap>
            <v-flex
              xs10 sm6 md4 lg3 class="mr-2 mb-2" v-for="(obj,key) in portfolio" :key="key"
            >
              <v-card>
                <v-img
                  class="image" :src="obj.img"
                >
                  <v-expand-transition>
                    <div
                      v-if="hover" 
                     class="d-flex transition-fast-in-fast-out grey darken-4 v-card--reveal display-3 white--text"
                     style="height: 100%;"
                    >
                      <h4>{{ obj.title }}</h4>
                    </div>
                  </v-expand-transition>
                </v-img>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card>
    </v-flex>
  </v-layout>
</template>