Fomantic-ui: [Grid] Masonry variation

[goodwin74]

Is there support for masonry grid in Fomantic-UI? If so, how to implement such a grid?
Thank you very much!

[exoego]

By default build configuration, Fomantic-UI (and Semantic-UI) do reset styles of almost all elements in https://github.com/fomantic/Fomantic-UI/tree/master/src/definitions/globals.
Therefore, it may have cosmetic issues with other UI components library, or may not with any luck.

You may build FUI without reset style.
It is required to use FUI/SUI with other UI components library at your own risk.

[goodwin74]

By default build configuration, Fomantic-UI (and Semantic-UI) do reset styles of almost all elements in https://github.com/fomantic/Fomantic-UI/tree/master/src/definitions/globals.
Therefore, it may have cosmetic issues with other UI components library, or may not with any luck.

You may build FUI without reset style.
It is required to use FUI/SUI with other UI components library at your own risk.

Did not understand you. I asked if there is support for Masonry grid in Fomantic-UI? I did not find anything in the documentation

[goodwin74]

By default build configuration, Fomantic-UI (and Semantic-UI) do reset styles of almost all elements in https://github.com/fomantic/Fomantic-UI/tree/master/src/definitions/globals.
Therefore, it may have cosmetic issues with other UI components library, or may not with any luck.

You may build FUI without reset style.
It is required to use FUI/SUI with other UI components library at your own risk.

those. is it possible to make such a grid in Fomantic-UI

[exoego]

Ah, sorry, I thought you want use FUI with https://masonry.desandro.com/
But you want to create a masonry grid, a grid having no fixed height rows, like Pinterest, with FUI?
IIUC, FUI does not offer such feature right now.
Welcome PR.

I updated a titile so this issue is considered as a feature request.

[goodwin74]

Ah, sorry, I thought you want use FUI with https://masonry.desandro.com/
But you want to create a masonry grid, a grid having no fixed height rows, like Pinterest, with FUI?
IIUC, FUI does not offer such feature right now.
Welcome PR.

I updated a titile so this issue is considered as a feature request.

Yes you are right! I wanted to make a grid using FUI. Is such an opportunity planned?
Or maybe there is a temporary solution to how to make such a grid without third-party libraries

[exoego]

Is such an opportunity planned?

No, I do not think there is any plan for masonry grid, since this is a first feature request both in FUI/SUI to my knowledge.
Since FUI is community-maintained OSS, anyone can open a pull request to resolve issue, and maintainers including me are happly to review.

[GammaGames]

Someone did have a working demo in SUI 3 years ago: https://github.com/Semantic-Org/Semantic-UI/issues/3353#issuecomment-244058579

[goodwin74]

Someone did have a working demo in SUI 3 years ago: Semantic-Org/Semantic-UI#3353 (comment)

I saw this example.
This is not Masonry. In Masonry the horizontal order of elements. This example displays vertically elements - it is very inconvenient. Using css "column" is intended for text.

[VarenSwaab]

I would also like to see masonry in Formantic.

[hugopeek]

I don't know if this should be core functionality of Fomantic UI. That means it needs to work together with the existing grid system and other components, which seems like a large maintenance burden to me for something that's already available through other libraries.

Take this one for example: https://github.com/e-oj/Magic-Grid. You can plug that in to an existing SUI grid with minimal effort.

<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
<script>
    let magicGrid = new MagicGrid({
        container: ".ui.magic.grid",
        static: true,
        animate: true,
        gutter: 0,
    });

    magicGrid.listen();
</script>