3

You can think of this as we upload multiple pictures (may be of different dimensions) on Facebook and they display them nicely, in their newsfeed.

I have a container .wrapper it contains a CSS-grid layout box having class .card-img-grid. It can have a maximum for 4 images, but they will be of different width and height, i.e., some will have a square shape, some will be long in either direction(vertically or horizontally). Totally depends on how a user has uploaded.

My problem is due to the difference in the size of images grid, is creating the white gaps, which is ruining my complete UX. Please help me, how can I fix that or there is another way to achieve Facebook type layout for multiple images?

I want the grid to adjust on its own according to the images. Also, I cannot use
grid-column: span 2;grid-row: span 2; like properties, becoz I don't know abt how big or small images are. Working codepen demo

My Angular Template

<div class="card-img-grid">
  // Loop will be displaying only 4 images, but can have different size
  <ng-container *ngFor="let img of feed.images | slice: 0 : 4">
     <div class="img-grid-item">
       <img class="w-100" [src]="img.url"> // .w-100 sets width: 100%
      </div>
   </ng-container>
</div>

CSS Code

.wrapper {
  max-width: 500px;
}

.card-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 4px;
  grid-auto-flow: dense;
  margin: 14px 0 5px;
}
.card-img-grid .img-grid-item {
  overflow: hidden;
  cursor: pointer;
}

My layout

Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65

1 Answers1

0

Fairly simple CSS can accomplish this depending on your requirements.

#container {
   column-count:4;
   column-gap: 0;  

   .img-card {
     width:100%;
   }
}

Example: https://stackblitz.com/edit/responsive-image-cols

Eric S
  • 157
  • 5