gilbitron / flexmasonry

A lightweight masonry (cascading grid layout) library powered by flexbox.

Hi! I’m Gilbert

I'm a Software Engineer living and working in the North of Scotland. I'm currently co-founder & CTO of Lemon Squeezy.

• Find out more about me
• I tweet about web development, tech and life
• I do it for the gram

Want to chat? Hit me up on Telegram or shoot me an email.

flexmasonry's Issues

Only one instance of Flexmasonry working

I have two pages on a site where I want to create two separate, different instances of Flexmasonry. But only one the instances is working.

One page has a UL of images, the other a UL of divs with text content. I have the Flexmasonry code in two separate JS files which are built and minified with Gulp into a single main.js file, which is included on both pages. It seems that whichever of the instances comes last in the compiled JS file is the instance that works, and the previous one doesn't.

This is the un-minified fragment from the built main.js file:

document.addEventListener('DOMContentLoaded', function () {
  
  FlexMasonry.init('.js-image-gallery', {
    responsive: true,
    breakpointCols: {
        'min-width: 980px': 4,
        'min-width: 768px': 2
    },
  });
  
})

document.addEventListener('DOMContentLoaded', function () {
  
  FlexMasonry.init('.js-information-grid', {
    responsive: true,
    breakpointCols: {
      'min-width: 980px': 3,
      'min-width: 768px': 2
    },
  });
    
})

Here the .js-information-grid works, but the gallery does not. If switched in order, then the other works.

Is this a known issue with Flexmasonry?

Thanks!

When resizing there's a flickering that happens due to where the columns are being placed

It's easily reproducible by increasing/decreasing the width of the browser window.

Basic instructions not working...?

Hi, your tool seems nice in the demo on the home page, but I can't figure out how a basic demo is supposed to be set up from scratch.

For example:

https://codepen.io/impressivewebs/pen/rNNqgEM?editors=0010

I believe I've done whatever the instructions say, but I'm not seeing anything resembling a responsive grid that fits in the viewport. Am I supposed to do something to prevent the horizontal scroll bars? When I add a max-width to the container, it doesn't seem to help.

It might be good to include a demo with the unsplash images that looks practical and usable...? Just my two cents, but certainly my limited understanding of this library might be the main culprit here. Thanks.

refresh method

Hi,
How would I use the refresh method? I've tried to refresh the grid with the click of a button, but that doesn't work.

const fm = FlexMasonry.init('.grid', {
    breakpointCols: {
        'min-width: 960px': 5,
        'min-width: 768px': 4,
        'min-width: 576px': 3,
        'min-width: 450px': 2,
    }
});

document.getElementById('refresh').addEventListener('click', function() {
    fm.refresh();
});

Could you please tell me what I'm doing wrong? Sorry, I'm having a very limited understanding of Javascript. My apologies for that.

Thank you
Klaas

Are equal height rows supported?

Hello! Great app, but curious if you have plans to support equal height rows (maybe this goes by a different name than "masonry"?). The best example I have seen of this would be Flickr (some of my underwater photos). Could this framework be modified to support that format?

using import not working

i am try to use of flexmasonary using

import FlexMasonry from 'flexmasonry';

can i know why it's not working.i don't have enough knowladge of npm and all.But one of my friend checked your package.json file and he changed below things.

from

"main": "dist/flexmasonry.js",

to

"main": "src/flexmasonry.js",

and after it's working.but still i don't know how to import css.

gap function doesn't work ?

Hello, I apologize, but I am trying to add a gap between objects but still doesn't work. is the gap created at all?
Thank you so much

One-column-layout is not working

I'm using your library on my site and it works great so far.
There's one problem though: when I resize the window to a width smaller than min-width (e.g. 576px), I'd expect a one-column-layout. However, my items are arranged horizontally in one row.

Can you give me some help on this please?

gap parameter?

Is it possible to set gap parameter? I tried adding it with css, but it breaks the grid

Tall items can break the flow

Here is a pen with an example of what I am talking about.

https://codepen.io/matthewdixon/pen/dyobXEN

Two columns, three (or more items) when the first item is taller than the others. In this example I would expect the last item to be in the right column. But perhaps this is expecting too much from flexbox based layout?

The use case is a page with a series of galleries throughout seperated by text where each gallery has 2 - 6 items in it.

Pinterest re-order?

Hi,

I would like to ask if this can be used in some sort of userscript or extension to re-organize Pinterest thumbnails after ad-removal which leave voids, so everything get placed to just look like there was not adblocking?

Typescript types

I'm no expert, and there may be problems with this, but here's what I'm using. It might be a starting point.

type FlexMasonryOptions = {
  responsive?: boolean;
  breakpointCols?: {
    [key: string]: number;
  },
  numCols?: number;
};

declare module 'flexmasonry' {
  function init(targets: string | NodeList, options?: FlexMasonryOptions): this;
  function refresh(target: Element, options?: FlexMasonryOptions): this;
  function refreshAll(options?: FlexMasonryOptions): this;
  function destroyAll(): void;
};

issue with showing

Hello, I use the Chrome web browser and sometimes when I refresh the page it happened this on pictures but after refreshing the page it's okay.
But when I use different web browsers like IE or Firefox issue the problem still persists.
Anyone helps me where can be the problem?

This is my web app, after registration, you have to create tasks and shows and there is a problem.
https://assignment-book1.onrender.com

link on Github:
https://github.com/TomasBalbinder/Assignment-book/blob/main/ToDoApp/templates/ToDoApp/show_posts.html

Item spacing can break

I have a situation where I want three columns but only two items are available. I am not sure if I am misunderstanding the settings or if this is a bug.

What I expect to happen

FlexMasonry.init('.grid', {
    responsive: true,
    /*
     * A list of how many columns should be shown at different responsive
     * breakpoints, defined by media queries.
     */
    breakpointCols: {
        'min-width: 960px': 3,
        'min-width: 600px': 2
    },
    numCols: 1
});

<div class="grid">
     <div class="card"><img src="https://source.unsplash.com/Imc-IoZDMXc" alt=""></div>
    <div class="card"><img src="https://source.unsplash.com/Imc-IoZDMXc" alt=""></div>
</div>

I expected this to produce a three column grid. If there were two items, each would be 33% wide with a 33% wide space on the right hand side.

What actually happens

The 33% space is distributed between the second item leaving uneven gaps.

Steps to reproduce

I have a pen https://codepen.io/venncreative/pen/XWramej which shows the bug.

Multiple Column Spanning

Is it possible to make a grid item span multiple columns?
Hoping to receive this kind of layout