Vue 3 Masonry Layout

Question

Does anyone know of a masonry layout which works with Vue 3 and Server Side rendering?

My requirements is that I can not specify the columns up front, I want the masonry layout to work that out.

In my Vue 2 application I am using "vue-masonry". I had to also use "vue-client-only" as my application as my application is a server rendered application.

  <!-- Only rendered during client side rendering, vue-masonry is not support in SSR -->
  <client-only>
    <div
      class="grid"
      v-masonry="containerId"
      transition-duration="0.3s"
      item-selector=".grid-item">
      <div
        v-masonry-tile class="grid-item"
        v-for="(item, i) in items"
        v-bind:key="i">
        <img
          :src="getItemImage(item)"
          :data-key=i
          alt="Small preview">
      </div>
    </div>
  </client-only>

When I have this in my Vue 3 project I get the error

slot is not a function

I tried to perhaps use "vue-masonry-css" but that fails with

Uncaught TypeError: Cannot read property 'use' of undefined

For the following code

import Vue from 'vue';
import VueMasonry from 'vue-masonry-css';
Vue.use(VueMasonry);

Answer 1

I was also looking for a masonry layout with SSR and Vue 3 support. Since I couldn't find one for my use case I created https://github.com/DerYeger/vue-masonry-wall.

Check out the demo at https://vue-masonry-wall.yeger.eu/ to see if it fits your requirements.

Answer 2

I have been looking for an answer myself to implement dynamic Masonry layout and nothing worked for me properly so I had to develop my own algorithm for my blog page that support even IE11 and Edge browsers.

1. The grid layout should have the following structure:

<div class="grid-container">
    <div class="grid-item">
        <div class="grid-item-content"></div>
    </div>
</div>

2. style the grid container:

.grid-container {
    min-width: 70%;
    max-width: 100%;
    display: grid;
    column-gap: 1rem;
    grid-template-columns: repeat( auto-fit, minmax(22em , 1fr));
    grid-auto-rows: 300px;
 }

.grid-item {
    height: fit-content;
    /*add the rest of your desired styling properties*/
 }

You can change the width of the container and assign it whatever value you want.

The other two important properties from the css snippet above are:

• grid-template-columns to generate responsive grid items with minimum width of 22em and max width that equals the width of the grid container 1fr.
• grid-auto-rows property that, as the name suggests, gives rows height implicitly. for our masonry layout algorithm to work, I gave the minimum height value that a grid item in my case can have.

3. the following js algorithm will adjust the grid items after they have been loaded to achieve a masonry layout: ##

resizeAllGridItems() {
    //calculate the grid container with
    let gridWidth = document.getElementsByClassName("grid-container")[0].offsetWidth;
    /*calculate the grid item width (the width should be the same for all grid items
    because we used `repeat( auto-fit, minmax(22em , 1fr))` to generate our responsive
    columns)*/
    let gridItemWidth = document.getElementsByClassName("grid-item")[0].offsetWidth;
    /*devide the with of the grid container by the with of the grid item item to get
    the number of generated columns*/
    let columnsNumber = ~~(gridWidth / gridItemWidth);

    /*the second part of the algorithm with loop through all the generated grid items.
    Starting with the second row, the grid item in that row will be given a `margin
    -top` value that equals the height of the grid item situated right above it, minus
    the value of `grid-auto-rows`. This way whenever there's an extra space, the grid
    item below will have it's `margin-top` value adjusted to take the extra space.*/
    let x = columnsNumber;
    let colIdx = 0;
    let columnsHeights = [0, 0, 0];
    let tempColumnsHeights = [];
    let allItems = document.getElementsByClassName("grid-item");
    for(x; x<allItems.length; x++) {
      let topItemHeight = columnsHeights[colIdx] + allItems[x - columnsNumber].offsetHeight;
      allItems[x].style.marginTop = (topItemHeight - 300) + 'px';
      tempColumnsHeights.push(topItemHeight - 300);
      colIdx++;

      /*move to the next row of grid items to adjust them if all the items of the
      previous row are adjusted*/
      if (colIdx === columnsNumber) {
        colIdx = 0;
        columnsHeights = tempColumnsHeights;
        tempColumnsHeights = [];
      }
    }
  }

That's it. Now you have a masonry layout that is made by adjusting the margin top of grid items programatically taking into consideration several variables like the value of auto rows, the height of grid items, their width and the width of the grid container.

I came across several articles that also explain other approaches and algorithms to implement masonry layout but they didn't work for me. This article from css-Trick explains a lot of methods to implement a masonry layout. However I already tried these two other methods but didn't work for me:

• the first adjusts the value of grid-row-end according the height of the grid item and it's content to span the grid item by one or more rows.
• the second approach is using a third party library like Masonry.

Note if you're using grid items with image elements: I found this article that I tried that uses the imagesLoaded.js library. Using this library will make it possible to execute the algorithm after all the images are loaded. In my case I gave the images container a fixed height that way my articles' cards heights will be independent from the images it contains.

IE11 and Edge support

Use autoprefixer npm package which is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba. It add all necessary prefixes and parses your grid display properties for IE11 and edge. You can refer to this answer on how to enable grid support with autoprefixer since it's disabled by default: https://stackoverflow.com/a/61144097/8453311