Почему кладка отображает только один столбец Vuejs

Question

Я пытаюсь получить обои от Reddit и отображать их в макете кладки. Я использовал Desandro Masonry и Isotope, но у обоих возникла та же проблема.

<script defer>

const axios = require('axios')

import Masonry from 'masonry-layout'


export default {
  name: 'tile',
  props: {
    msg: String
  },
  data() {
    return {
      postsWithPreview: [],
      postsLoading: false,
      next: null,
    }
  },
  components: {

  },
  created() {

    this.getPosts()

    window.addEventListener('scroll', this.handleScroll)
     
  },
  mounted: function() {
    //var grid = document.querySelector('.grid')
    // eslint-disable-next-line no-unused-vars
    var msn = new Masonry(this.$refs.grid, {
      itemSelector: '.grid-item',
      // masonry: {
      //   columnWidth: 320
      // }
    })
  },
  methods: {

    getPosts(page) {
      const baseURL = "https://www.reddit.com/r/wallpapers.json?limit=25&count=25"

      var url = baseURL
      if (page != null) {
        url = baseURL + '&after=' + page
      }

      axios.get(url)
         .then(response => {

        var postObjList = response.data.data.children
        postObjList = postObjList.filter(function (post) {
           return post.data.preview 
           })
        this.next = response.data.data.after
        this.postsLoading = false
        
        this.postsWithPreview = this.postsWithPreview.concat(postObjList)


        function removeAmp(url) { // ** replacing all occurence of '&amp;' with '&'
          const parseResult = new DOMParser().parseFromString(url, "text/html");
          const parsedURL = parseResult.documentElement.textContent;
          // console.log(parsedURL);
          return parsedURL;
        }
        this.postsWithPreview.forEach(function (post) {
          post.data.preview.images[0].resolutions.forEach(function (res) {
            res.url = removeAmp(res.url);
          })

          post.data.preview.images[0].source.url = removeAmp(post.data.preview.images[0].source.url);
        })
        console.log(this.postsWithPreview);



      })
      .catch(error => {
        console.log(error)
      })

    },

    handleScroll() {
      let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
      if (bottomOfWindow) {
        console.log("End reached")
        if (this.next != null) {
          this.getPosts(this.next)
        }
      }
      
    },
  }
}
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template>
  <div class="container-fluid">
    <div class="grid" ref="grid">
      <div class="grid-item pics" v-for="post in postsWithPreview" :key="post.data.id">
        <div class="card" @click="showLightbox(post)">
          <img :src="post.data.preview.images[0].resolutions[2].url" class="img-fluid" alt="">
          <div class="content-overlay"></div>
          <div class="content">
            <p>U/{{ post.data.author }}</p>
            <span @click.stop><a target="_blank" v-bind:href=" 'http://www.reddit.com' + post.data.permalink"><i
                  class="fas fa-globe fa-lg" style="color: white;"></i></a></span>
          </div>
        </div>
        <!-- <hr class="my-2 style2"> -->
      </div>
    </div>
    <div class="lightbox">
      <div>
        <img src="" alt="">
        <div class="figcaption">
          <div id="info">
            <a target="_blank" href=""></a>
            <p></p>
          </div>
          <div class="icons">
            <a href="#"><i class="fa fa-heart-o"></i></a>
            <a href="#"><i class="fa fa-arrow-down"></i></a>
            <a href="#"><i class="fa fa-paint-roller"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

У меня есть стили для других элементов внутри grid-item div, т. Е. Изображения, рисунков и div, но они не должны влиять на этот макет. Я попытался установить css свойства grid-item с помощью

.grid-item {
    width: 30%;
} 

, которые по-прежнему выравнивают все элементы сетки внизу друг друга по вертикали и по одному столбцу. Как я могу решить это?