0

The following code generates a masonry layout:

<ngx-masonry  class="masonry" [options]="myOptions">
  <div ngxMasonryItem class="masonryItem" *ngFor="let post of posts;index as idx" (click)="showPostDetail(post)" >
    <div class="crop">{{post.description}}</div>
    <img [src]="imgConstructor(post.img)">
  </div>
</ngx-masonry>

Now the css code:

.masonryItem {
    padding: 7px;
    margin-top: 5px;
    background-color: darkgoldenrod;
    border: 0.4px solid black;
    width: 20%;
}

.masonryItem img {
    object-fit: cover;
    max-width: 100%;
    min-width: 100%;
}

So five images are displayed in a row since the width of each item is 20%. But now I want to include a margin-property in my css code in the masonryItem class

.masonryItem {
   margin: 1rem
}

But then there would be only 4 images in a row and some space on the right on the masonry-grid. So how to bring in the margin-property in my width-calculation such that five images are displayed in each row?

MY SOLUTION:

Add a border property with 1rem:

.masonryItem{
  border: 1rem solid white;
}

It looks like margin 1rem if the background-color and border-color is the same. Then the amount of images per row is identically.

Opat
  • 93
  • 1
  • 2
  • 9

2 Answers2

1

If you are using this library: https://github.com/wynfred/ngx-masonry, there is a gutter property that should permit to change the distance between items.

Cédric Rémond
  • 954
  • 1
  • 8
  • 20
1

For this kind of display, you should probably use a "display: flex" with a "gap" property for the spaces between element.

Yoann Augen
  • 1,966
  • 3
  • 21
  • 39