Components: Grid with masonry like brick layout

Created on 26 Jan 2018 · 9Comments · Source: angular/components

Bug, feature request, or proposal:

Material Design spec allows for a grid with masonry like brick layout.

What is the expected behavior?

https://plus.google.com/discover or even https://keep.google.com/ - homepage like layout where each post could potentially be an md-card.

What is the current behavior?

This can not be achieved using the existing the grid implementation.

Source

cyberbeast

Most helpful comment

@cyberbeast, even there's no component based on column it would not be so complicated to do it with regular components. You can use flex-layout to achieve this result: https://stackblitz.com/edit/angular-material-column-component

Basically you need something like:

<div fxLayout="row" 
     fxLayoutAlign="center start" 
     fxLayoutGap="20px">

  <div *ngFor="let row of _data" 
        fxFlex="33" 
        fxLayout="column" 
        fxLayoutAlign="center start" 
        fxLayoutGap="20px">

    <div *ngFor="let el of row"
          [style.width]="'100%'">

      <mat-card>
        card {{el}}
      </mat-card>

    </div>

  </div>

</div>

julianobrasil on 26 Jan 2018

👍3

All 9 comments

@cyberbeast, could you give more details telling what prevents MatGrid to fulfill your exptectations? It seems what @kara do in this this video is what you need.

julianobrasil on 26 Jan 2018

Also take a look at: https://stackblitz.com/edit/angular-material2-list-of-cards

julianobrasil on 26 Jan 2018

👎4

We consider application-level layout to be outside the scope of Angular Material, which focuses on individual components.

jelbourn on 26 Jan 2018

@julianobrasil First of all, thank you so much for your response to my query. I went over the video you shared and while it does aim to do what I want, I find the following limitations:-

The row/column span has to be manually specified.
While that strategy might work for images, would that necessarily scale to other containers such as cards?

While MatGrid certainly does allow cards to span over a single row, it still feels like the grid system (just like, other grid systems) is "row-oriented". I might be missing something here, but it feels like these grid systems are dictated by the following pseudo-protocol - "Here is a row, here are the items that need to be inserted in the row. Here is the next row, here are the items for the second row.". How would MatGrid enable a layout that enforces a "column-first approach" - "Here are 'n' columns. Here is a set of items that I want spread across these columns ."

Here is a visual representation of what I am talking about. Notice the non-uniform height for each element.

Found another link with bootstrap here.

Again, thank you for engaging in this discussion. Appreciate the input.

cyberbeast on 26 Jan 2018

Basically you need something like:

<div fxLayout="row" 
     fxLayoutAlign="center start" 
     fxLayoutGap="20px">

  <div *ngFor="let row of _data" 
        fxFlex="33" 
        fxLayout="column" 
        fxLayoutAlign="center start" 
        fxLayoutGap="20px">

    <div *ngFor="let el of row"
          [style.width]="'100%'">

      <mat-card>
        card {{el}}
      </mat-card>

    </div>

  </div>

</div>

julianobrasil on 26 Jan 2018

👍3

@julianobrasil
Thanks for this last example. This is almost what I am looking for. The only drawback from my point of view is that it's not responsive (e.g. it will not change to two and then one column for smaller screens).

I am just starting looking into angular-flex as an alternative to bootstrap, therefore it would be very beneficial if you (or somebody) could provide a responsive example for this. Thank you!

That's an example of I am looking for:

(I understand that's not angular-flex project but the topic is very similar to what I am looking for)

eugenekup on 13 Jan 2019

@eugenekup you might need to have a look at this the following examples and docs:

The responsive rules can be achieved with the 'object literal notation' expressions like fxFlex.md where 'md' stands for medium, there are other breakpoints as well for you to use.

khiami on 7 May 2019

👍1

@eugenekup you might need to have a look at this the following examples and docs:

https://stackblitz.com/edit/angular-flex-layout-seed

https://github.com/angular/flex-layout/wiki/Responsive-API

The responsive rules can be achieved with the 'object literal notation' expressions like fxFlex.md where 'md' stands for medium, there are other breakpoints as well for you to use.

that wont work when your dealing with a fixed nested array