Masonry Grid: Wrong positioning if first child is longer than others

[PhilippLupo]

UIkit Version

3.7.6

Actual Behavior

The masonry grid does not position its children correctly if the first child has a bigger width than the other children. For example:

Expected Behavior

The items should be positioned correctly regardless if the first element has another width.

Reproduction Link

Codepen template* <div class="uk-child-width-1-2@s uk-child-width-1-3@m" uk-grid="masonry: true"> <div class="uk-width-2-3@m"> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 300px">Item</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Item</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 150px">Item</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 160px">Item</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 120px">Item</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Item</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 180px">Item</div> </div> <div> <div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div> </div> </div>

[Nielsvdel]

I have the same issue:

:

[mjut]

I am experiencing exactly the same issue. As I am trying to load landscape and portrait images into a masonry grid. I need to have different or multiple widths within that uk-grid: Simply to prevent the portrait photos from being displayed huge on wide screens.

Its not only when the first item is bigger.

Is there a way to fix that in custom css?

[PhilippLupo]

I am experiencing exactly the same issue. As I am trying to load landscape and portrait images into a masonry grid. I need to have different or multiple widths within that uk-grid: Simply to prevent the portrait photos from being displayed huge on wide screens.

Its not only when the first item is bigger.

Is there a way to fix that in custom css?

I don't think there is a way to solve this with css since the positioning is done by UiKit with JavaScript.

[mjut]

ah, JavaScript.. Unfortunately, I am not really experienced with JS. I ll just wait for this being fixed in uikit.

[timrasche]

+1

! There is another issue for this subject... open since 2019!