Support with "CSS Grid Layout"

[imfaisalkh]

I was trying to implement isotope plugin on a "CSS Grid" layout but it is not working. As soon as any filtration link is clicked all grid items get hidden (gets 0 width and height). I'm using a grid something like this: https://codepen.io/imfaisal/pen/rzdzqN?editors=1100

Is it something that can be fixed by configuring plugin from available API or does this plugin simply has no support for CSS grid layout for the time being?

[imfaisalkh]

Update: I get filtration to work using additional code for isotope, taken from this codepen: https://codepen.io/desandro/pen/AEslp

The filtration functionality and its transition work smoothly but after filtration, grid items "position" with no transition.

[desandro]

Add a 👍 reaction to this issue if you would like to see this feature added. Do not add +1 comments — They will be deleted.

---

Thank you for this feature request. Isotope does not support CSS Grid Layout. Whereas float layouts may be overwritten with absolute position with Isotope, I'm not sure if the same technique will work with CSS Grid layouts. These two features may be incompatible.

[ianhobbs]

I am having the same issue. You'll have to make the grid container ( the last grid element a fixed area ) and float the children inside am working on a fix for this now and can demo when its done.

[DarioLopes]

Hello any news about that?

[Imran-S-heikh]

any news?

[Julianoe]

Isotope is still quite popular and CSS Grid is gaining a lot of traction in modern web layouts. Any news? Has anyone managed to make it compatible in some way?

[CyanoFresh]

last update 3 years ago. seems like a dead library, but cool

[thesublimeobject]

@CyanoFresh — The library is not dead, although re-configuring the library for Grid layouts would likely be quite a bit of work. Let me ask, what benefits would adding Grid support add to the library for your use? I'm just curious (I don't want this to be taken as confrontational, especially since I'm not the official author, but simply a contributor that helps with some of this stuff).

Personally, I use Grid/Flex on a lot of different stuff, but the CSS for this library is so easy. Using grid, in my opinion, wouldn't really have any added features that don't exist now, and not having it doesn't seem to really hurt, as far as I can tell/my experience.

[CyanoFresh]

@CyanoFresh — The library is not dead, although re-configuring the library for Grid layouts would likely be quite a bit of work. Let me ask, what benefits would adding Grid support add to the library for your use? I'm just curious (I don't want this to be taken as confrontational, especially since I'm not the official author, but simply a contributor that helps with some of this stuff).

Personally, I use Grid/Flex on a lot of different stuff, but the CSS for this library is so easy. Using grid, in my opinion, wouldn't really have any added features that don't exist now, and not having it doesn't seem to really hurt, as far as I can tell/my experience.

thank you for the reply. I want to build 4 column gallery. Item sizes are not known and should be responsive. css-grid nailed it using 2 rows of code.

As a workaround now I use width=25%, media-queries, padding (which works not the same as gutter)

[cloudinstone]

@CyanoFresh — The library is not dead, although re-configuring the library for Grid layouts would likely be quite a bit of work. Let me ask, what benefits would adding Grid support add to the library for your use? I'm just curious (I don't want this to be taken as confrontational, especially since I'm not the official author, but simply a contributor that helps with some of this stuff).

Personally, I use Grid/Flex on a lot of different stuff, but the CSS for this library is so easy. Using grid, in my opinion, wouldn't really have any added features that don't exist now, and not having it doesn't seem to really hurt, as far as I can tell/my experience.

imaging this:

div { display: grid; max-width:1000px; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }

[thesublimeobject]

@cloudinstone && @CyanoFresh —

It seems like what you're both wanting, if I'm understanding correctly, is the ability to have dynamically sized tiles to some degree, correct?

You can kind of get around this with some dynamic size-setting via custom JS, but I really don't know if or when this would be added to the library itself. I'm pretty sure this would make a lot of the logic a lot more complex. I will look into it at some point soon if I have some extra time though.

[rubymused]

I'm interested in this feature. Here's an example layout that uses grid, with which we'd like to use isotope filtering, sorting, and animation. If there's a way to do this currently I'm all ears.

[medoingthings]

A colleague of mine made it work:
https://www.ananda-massage.de/koeln/team-tantra-coaching

You can check out the code… watch out for side effects when using grid-column-start and the like that you need to watch out for.