Angular map display material

Question

I have a gallery of images, and I would like to display them in a polaroid-based system spanning several rows and columns. The problem I am facing is related to the layout of the image. When the images are both portrait and landscape, the matte landscape attribute for the landscape becomes inflated to fit the size of the portrait. How can I have a natural filling system in which a matte card adapts to the ratio of the width and height of the image?

HTML:

<div fxLayout="row"> <div layout="column"> <div fxFlex="100" fxFlexOffset="1" fxLayoutWrap fxLayoutGap="2rem" class="mat-elevation-z0" *ngIf="postcards != null"> <mat-card *ngFor="let postcard of postcards let index = index" > <img mat-card-image src="{{postcard.img}}" alt="{{postcard.postcard_id}}" class="postcards" (click)="display_postcard(index)"> </mat-card> </div> </div> </div> 

CSS

 .postcards { max-width: 320px; } 

Current view:

And this is what I would like to achieve:

Thanks!

Answer 1

I think you are looking for the fxLayoutAlign property.

Try adding fxLayoutAlign="start start" to your div as follows:

 <div fxFlex="100" fxFlexOffset="1" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="start start" class="mat-elevation-z0" *ngIf="postcards != null"> 

PS Check out the Flex-Layout Demo if you want to play with various options.

Answer 2

You might want to try masonry or isotope to help fill in the blanks, both have npm packages in dev:

https://www.npmjs.com/package/angular2-isotope

https://www.npmjs.com/package/angular2-masonry

Answer 3

I know that my answer will look strange, but I think that the float on the left may be what you are looking for (yes, I hate swimming myself)

But if you get rid of all the flex material of your example and add margin directly to mat-card

 <div class="mat-elevation-z0" *ngIf="postcards != null"> <mat-card *ngFor="let postcard of postcards let index = index" > <img mat-card-image src="{{postcard.img}}" alt="{{postcard.postcard_id}}" class="postcards" (click)="display_postcard(index)"> </mat-card> </div> mat-card { margin: 1rem; float: left; } 

Your map will try to fit into the available space. But of course, this is not a perfect match for all occasions. But I think this is the best CSS based solution you can find.