How to set up flexible grid in Vue Material

I am attempting to build an interface that uses Vue-Material to render user-inputted cards in a grid. the cards render properly. However, I want my grid to flex, justify, and stagger the different-sized cards in a way that removes gaps, as seen below:

enter image description here

The following code corresponds with the above grid:

<template>
  <div class="content">
    <div class="md-layout">
      <div
        v-for="post in posts.slice().reverse()" :key="post.id"
        class="md-layout-item md-size-20 md-xsmall-size-100"
      >
        <md-card>
          <md-card-content v-if="post.downloadUrl">
            <md-card-media>
              <img :src="post.downloadUrl" style="width: 100%"/>
            </md-card-media><br>
            <p>{{ post.content }}</p>
            <p>{{ post.timestamp | moment }}</p>
          </md-card-content>

          <md-card-content v-else>
            <p>{{ post.content }}</p>
            <p>{{ post.timestamp | moment }}</p>
          </md-card-content>
          <md-card-actions>
            <md-button class="md-icon-button md-info">
              <md-icon>favorite</md-icon>
            </md-button>
            <md-button class="md-icon-button md-info">
              <md-icon>share</md-icon>
            </md-button>
          </md-card-actions>
        </md-card>
      </div>
    </div>
  </div>
</template>

How can I configure this Vue-Material layout to arrange the cards in a way that removes those gaps? Thanks!

enter image description here

Example #3

enter image description here

19 thoughts on “How to set up flexible grid in Vue Material”

  1. You can use grid layout:

    Vue.use(VueMaterial.default)
    
    new Vue({
      el: '#app'
    })
    .grid-container {
      display: grid;
      max-width: 100%;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: minmax(10px, auto);
      grid-gap: 1rem;
      padding: 1rem;
    }
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
    <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
    
    <body>
      <div id="app">
        <div class="grid-container">
          <md-card>
            <md-card-media>
              <img src="https://vuematerial.io/assets/examples/card-image-1.jpg" alt="People">
            </md-card-media>
            <md-card-header>
              <div class="md-title">Card without hover effect</div>
            </md-card-header>
    
            <md-card-content>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
            </md-card-content>
    
            <md-card-actions>
              <md-button>Action</md-button>
              <md-button>Action</md-button>
            </md-card-actions>
          </md-card>
    
          <md-card md-with-hover>
            <md-ripple>
              <md-card-header>
                <div class="md-title">Card with hover effect</div>
                <div class="md-subhead">It also have a ripple</div>
              </md-card-header>
    
              <md-card-content>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
              </md-card-content>
    
              <md-card-actions>
                <md-button>Action</md-button>
                <md-button>Action</md-button>
              </md-card-actions>
            </md-ripple>
          </md-card>
          <md-card>
            <md-card-header>
              <div class="md-title">Card without hover effect</div>
            </md-card-header>
    
            <md-card-content>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
            </md-card-content>
    
            <md-card-actions>
              <md-button>Action</md-button>
              <md-button>Action</md-button>
            </md-card-actions>
          </md-card>
    
          <md-card md-with-hover>
            <md-ripple>
              <md-card-header>
                <div class="md-title">Card with hover effect</div>
                <div class="md-subhead">It also have a ripple</div>
              </md-card-header>
    
              <md-card-content>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
              </md-card-content>
    
              <md-card-actions>
                <md-button>Action</md-button>
                <md-button>Action</md-button>
              </md-card-actions>
            </md-ripple>
          </md-card>
          <md-card>
            <md-card-header>
              <div class="md-title">Card without hover effect</div>
            </md-card-header>
    
            <md-card-content>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
            </md-card-content>
    
            <md-card-actions>
              <md-button>Action</md-button>
              <md-button>Action</md-button>
            </md-card-actions>
          </md-card>
    
          <md-card md-with-hover>
            <md-ripple>
              <md-card-header>
                <div class="md-title">Card with hover effect</div>
                <div class="md-subhead">It also have a ripple</div>
              </md-card-header>
    
              <md-card-content>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
              </md-card-content>
    
              <md-card-actions>
                <md-button>Action</md-button>
                <md-button>Action</md-button>
              </md-card-actions>
            </md-ripple>
          </md-card>
          <md-card>
            <md-card-header>
              <div class="md-title">Card without hover effect</div>
            </md-card-header>
    
            <md-card-content>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
            </md-card-content>
    
            <md-card-actions>
              <md-button>Action</md-button>
              <md-button>Action</md-button>
            </md-card-actions>
          </md-card>
    
          <md-card md-with-hover>
            <md-ripple>
              <md-card-header>
                <div class="md-title">Card with hover effect</div>
                <div class="md-subhead">It also have a ripple</div>
              </md-card-header>
    
              <md-card-content>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio itaque ea, nostrum odio. Dolores, sed accusantium quasi non.
              </md-card-content>
    
              <md-card-actions>
                <md-button>Action</md-button>
                <md-button>Action</md-button>
              </md-card-actions>
            </md-ripple>
          </md-card>
        </div>
        &copy Image linked from https://vuematerial.io/
      </div>
    
      <script src="https://unpkg.com/vue"></script>
      <script src="https://unpkg.com/vue-material"></script>

    More on CSS grid: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

    ANOTHER SOLUTION

    You could use

    Andy Barefoot’s solution: https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb (Codepen: https://codepen.io/andybarefoot/pen/QMeZda),

    or any from here: https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

    Unfortunately I cannot add it as a snippet – the content is too long, so my answer would be over 30,000 characters.

    Reply
  2. Thanks to all who responded today. However, what I needed was a plugin like this: https://www.npmjs.com/package/vue-masonry-css

    All I needed to do was embed the v-for loop container and the cards inside the following:

    <masonry
      :cols="3"
      :gutter="30"
      >
      <div v-for="(item, index) in items" :key="index">Item: {{index + 1}}</div>
    </masonry>
    

    THIS is what I was trying to achieve:

    enter image description here

    Reply

Leave a Comment