2

Can we have layout as below image with the help of angular flex-layout? Something similar is there with AngularJS - AngularJS Material

expected behaviour

Shyam Shinde
  • 287
  • 1
  • 5
  • 14

1 Answers1

3

You can use the grid list from material: https://material.angular.io/components/grid-list/overview
But I think you are looking for a more dynamical approach, where you do not have to define the height yourself. This kind of layout is called "masonry layout" and can be achieved with plain css like this:

HTML

<div class="masonry-layout">
  <div class="masonry-layout__panel" *ngFor="let option of options">
    <div class="masonry-layout__panel-content">
      ...
    </div>
  </div>
</div>

CSS

.masonry-layout {
    column-count: 2;
    column-gap: 0;
    margin: 8px;
}

.masonry-layout__panel {
    break-inside: avoid;
}

.masonry-layout__panel-content {
    padding: 8px;
    display: flex;
}

As an alternative, you can do it with the FlexLayoutModule, and define columns like this:

<div fxLayout="row">
  <div class="column" fxFlex="50%>
    <div class="card">
    <div>
    <div class="card">
    <div>
  </div>
  <div class="column" fxFlex="50%>
    <div class="card">
    <div>
    <div class="card">
    <div>
  </div>
</div>
Markus Kollers
  • 3,508
  • 1
  • 13
  • 17
  • the first solution is giving close result to what I want. But I wanted to make columns flow from left to right instead of top to bottom. Here is the similar question - https://stackoverflow.com/questions/14925157/css-columns-with-left-right-flow Can we make columns to flow from left to right? – Shyam Shinde Jun 29 '18 at 11:02