CODEWITHSUNDEEP
vuetify.js
skunkwerk
skunkwerk

Reputation: 3070

Vuetify grid of images

I have an array of image URls (between 0 and 25 in length) that I'd like to display in a grid that's 1-2 columns wide in a responsive manner (2 columns if on a wide screen, 1 column if on a mobile device, etc.). I have a vue.js app and am using the Vuetify material design system.

How do I set that up so that it automatically creates a new row every for every 2 images on a wide screen? I've added 'row wrap' attributes but don't think it's working. This is my code so far:

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

Upvotes: 1

Views: 5350

Answers (1)

yson
yson

Reputation: 276

Review this documentation. Vuetify has a 12 point grid system.

Contains 5 types of media breakpoints that are used to target specific screen sizes or orientations

you must relocate the for cycle, use the breakpoints xs and 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>

Upvotes: 2

Related Questions