[Vuejs]-Filling vertical whitespace with grid/flex with strict ordering

by

-1👍

You could use a flex grid and js mix to make a Masonry layout since it is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows

https://codepen.io/inorganik/pen/pREYPJ

Vue

<template>
  <div id="block-contain" v-bind:class="{ 'cards-container-not-home': notHome }">
    <div v-for="data in imageData" :key="data.id" class="block">
      <div class="card">
        <img :src="data.source" :alt="data.caption" class="card-img" />
        <div class="text-box">
          <p>{{ moment(data.timestamp.toDate()).format("MMM Do YYYY") }}</p>
          <p>{{ data.caption }}</p>
          <Geolocation v-bind:address="data.location" />
        </div>
      </div>
    </div>
  </div>
</template>

CSS

#block-contain { 
  display: flex;
  flex-flow: column wrap;
  max-width:100%;
}
.block {
  padding:20px;
  flex: 1 0 auto;
  overflow:hidden;
}
.card{
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1 0 auto;
  justify-content:center;
  align-items:center;
  min-height:100px;
}

Script to adapt

var COL_COUNT = 3; // set this to however many columns you want
var col_heights = [], 
    container = document.getElementById('block-contain');
for (var i = 0; i <= COL_COUNT; i++) {
  col_heights.push(0);
}
for (var i = 0; i < container.children.length; i++) {
  var order = (i + 1) % COL_COUNT || COL_COUNT;
  container.children[i].style.order = order;
  col_heights[order] += parseFloat(container.children[i].style.height);
}
var highest = Math.max.apply(Math, col_heights);
container.style.height = highest+'px';

Leave a comment