Responsive list of Material Cards With Angular 4

Question

I'm building a SPA with Angular 4 and the official @angular/material-design and @angular/flex-layout APIs. I want to display a variable list of some projects (app-project-list), which I represent with Md-Cards (app-project-card). A perfect example of how I want it to be can be seen on this page: weo3.com/work The goal is here to have a responsive list of cards:

• on desktop they should be placed in rows which wrap around
• they should have some margin in between and below
• the last card in the list should be aligned left if it is the only one in the row
• on smaller screens the column count should decrease
• and on mobile (breakpoint is xs) the list should be displayed in a column

This is the code I have so far and it has issues:

//project-list-component
<div fxLayout="row wrap" fxLayoutGap="1em" fxLayoutAlign="center center" fxLayout.lt-sm="column">
  <app-project-card *ngFor="let p of projects | async" [project]="p">
  </app-project-card>
</div>

//project-list-component.css
app-project-card {
  margin-top: 1em;
}
//project-card-component starts with md-card as root element, nothing special here
  <md-card>
  ...
</md-card>

The issues

• when on desktop and all items in one row it looks fine
• as soon as you resize it, the last item gets wrapped in a new row and is aligned in the center, but I need this one to align at the start of the row Example
• when one or more items are wrapped, they aren't aligned below the first row, instead they are 1em off to the right (see the first image)
• the cards don't fill all the available space when the screen is getting smaller, there is plenty of whitespace left and right

I've looked at all the three similiar questions here, however none of these did satisfy the requirements (see this angularJS question and this angular2 question). Any help is much appreciated!

Answer 1

I have beed solving similar issue with wrapping of multiple cards. I have found solution to similar problem:

<div fxLayout="row" fxLayoutWrap>
    <md-card *ngFor="let post of posts" fxFlex.lg="33" fxFlex.lt-lg="50" fxFlex.xs="100">
           ...
    </md-card>
</div>

notice the fxLayoutWrap directive, which allows correct wrapping of elements on new row. And individual fxFlex-es are defining how many elements there should be in one row for given breakpoint.

Also NOT using 'center' will solve the problem with singleton element in the row, and will naturally start from the beginning.

With the code snippet I achieved this result: