grid.vue

<template>
  <div>
    <v-container
      grid-list-xs
      mb-5
      ma-auto
    >
      <v-layout>
        <v-flex
          v-for="n in 20"
          :key="n"
          xs3
        >
          <v-card
            height="100"
            width="100%"
          ></v-card>
        </v-flex>
      </v-layout>
    </v-container>

    <v-container
      grid-list-xl
      contained
      mb-7
    >
      <v-layout>
        <v-flex
          v-for="n in 20"
          :key="n"
          xs3
        >
          <v-card
            height="100"
            width="100%"
          ></v-card>
        </v-flex>
      </v-layout>
    </v-container>

    <v-sheet
      color="grey lighten-1"
      tile
    >
      <v-container grid-list-xl>
        <v-layout
          v-for="n in 2"
          :key="n"
          row
          :reverse="n === 2"
        >
          <v-flex
            xs12
            md6
          >
            <v-sheet
              color="grey"
              height="100"
              tile
            ></v-sheet>
          </v-flex>
          <v-flex
            xs12
            md3
          >
            <v-sheet
              color="grey"
              height="100"
              tile
            ></v-sheet>
          </v-flex>
          <v-flex
            xs12
            md2
          >
            <v-sheet
              color="grey"
              height="100"
              tile
            ></v-sheet>
          </v-flex>
          <v-flex
            xs12
            md1
          >
            <v-sheet
              color="grey"
              height="100"
              tile
            ></v-sheet>
          </v-flex>
        </v-layout>
      </v-container>
    </v-sheet>
  </div>
</template>