masonry-layout | fast web component that gives you a beautiful masonry layout | Grid library

EDIT Keep in mind that each cell can have a different width and height. This is not the same thing as this post: CSS-only masonry layout, see guide lines of the reference picture:

there are about 19 columns and 17 rows made by guide lines and tiles placed in virtual 5×5 base grid overlap it in both axis.

I want something between a grid and a flex layout. Grids are limited by cell size and flex is more powerful, but (what I know of it) is limited to direction. I want to have different cell sizes, each 5 of them summing to the same width, and 5 columns summing to the same height. Like the image below.

Is there any way of achieving a similar layout using CSS?

This is all I got until now:

HTML:

I'm trying to separate children of a container div into left/right columns, with no vertical whitespace below or above the children items.

I'll explain the setup and provide a picture of the desired result, and then I’ll explain every solution I’ve tried and why each solution doesn’t seem to work.

The Setup

I have a container with children

I'm trying to import the module ngx-masonry in my JHipster app (angluar app).

I run

I'm using on my ASP-WebPage an UpdatePanel with Dropdown and Output-Div for Cards which are generated in CodeBehind, layouted by Masonry. The Output is Bound to the Dropdown.

On PageLoad the Masonry-Layout is running fine. When Dropdown changed, layout is lost and spaces between the cards.

I have tried to start the layout method of masonry-object after the output-div is changing. Seems is not running inside the UpdatePanel.

Can someone give me an impulse, how can i realise, that layout of masonry is doing its job again, after changes in update panel?

This is how i´m using it:

I'm working on an Express app where I'm sending HTML data from server-side to client-side by using AJAX. Everything is working fine but the problem is with the MasonryJS layout. All the images align to the left one after the other on a long column (not overlapping).

Please note that I'm using a modal with a fixed height of 100vh. And only the images container have the overflow-y set to auto.

Also note that the code I'm using right now, I tested those with static image data. It worked fine. But now that I'm using AJAX to get data from the server-side, it breaks the layout.

Here's a screenshot:

Here's the code:

So I have this image gallery which I displayed as Pinterest-style Masonry by using MasonryJS. Everything works fine but the problem is when I refresh the page. That is, when I refresh the page, all the images align to the left at first then comes to the actual place. It's like for a couple of milliseconds it goes to that position and comes back to life.

Here's a gif which shows the actual problem:

How can I not have it left-aligned in page refresh? I just wish it to stay in the middle no matter how much I refresh the page.

Here's the code:

I am trying to use masonry in a Preact app, tried several React plugins using react/compat but they are all failing.

This is how I'm trying:

I tried to reinstall one of my old vue projects on my new computer (on Windows 10) with npm but I came across this error :

I am attempting to arrange some (rather big) images using masonry, however the code below does not seem to be working. I am using node.js with express and installed the masonryjs package and attempted it that way which didn't seem to work, I then tried using the cdn with the same result.