[Vuejs]-How can I make my image grid stack in VueJS?

by

0👍

You probably need a top level v-layout and v-flex.

Try it like this:

<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>

Leave a comment