[Vuejs]-Stack v-cards within n columns

by

1👍

✅

Okay, so I’ve found the solution, thanks to David Weldon, with css masonry layout.

I’ve my items as data.

data: function() {
    return {
        items: [
            { id: 1, text: 'lorem ipsum dolor sit amet...'},
            { id: 2, text: 'lorem ipsum dolor sit amet...'},
            { id: 3, text: 'lorem ipsum dolor sit amet...'},
            { id: 4, text: 'lorem ipsum dolor sit amet...'},
            { id: 5, text: 'lorem ipsum dolor sit amet...'}
        ],
    }
}

I build the cards in a simple div.

<div class="items">
    <v-card class="item" v-for="item in items" :key="item.id">
        {{ item.text }}
    </v-card>
</div>

Then make the css.

.items {
    column-count: 4;
    column-gap: 10px;
    padding: 0 5px;
}

.item {
    display: inline-block;
    width: 100%;
    margin: 5px 0;
}

/* Make it responsive */
@media only screen and (max-width: 1200px) {
    .items {
        column-count: 3;
    }
}

Here is the sandbox.

Thanks all for your help!

👤vanR

2👍

Since vuetifys grid system doesn’t allow this kind of wrapping. You can use css flex-box to achieve this kind of layout.

Define a container column layout with wrap option :

#flex-container {
  height: 400px;
  max-height: 400px;
  flex-flow: column wrap;
  box-sizing: border-box;
  display: flex;
}

Set your items flex and height styles in the v-for loop :

 <div id="flex-container">
    <template v-for="(item,i) in items">
      <div
        class="item"
        :key="i"
        :style="getStyle(item.height)"
      >{{item.height}}%</div>
    </template>
  </div>

getStyle method

getStyle(height) {
      return {flex: `1 1 ${height}%`, 'max-height': `${height}%` }
    }

Here is the sandbox.

👤Eldar

Leave a comment