CODEWITHSUNDEEP
cssgridviewlayoutangular-material
P.S.
P.S.

Reputation: 16402

Responsive grid of md-cards with different height via angular material

Here is my md-card's loop (except the first div):

<div layout="column" layout-gt-sm="row" layout-wrap="">
    <div flex="25" flex-gt-sm="50">
        <md-card>
            <md-card-header>
                <md-card-avatar><img src="#" />
                </md-card-avatar>
                <md-card-header-text>
                    <span class="md-title">Angular</span>
                    <span class="md-subhead">Material</span>
                </md-card-header-text>
            </md-card-header>
            <img ng-src="{{imagePath}}" alt="Washed Out" class="md-card-image" />
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">Text</span>
                </md-card-title-text>
            </md-card-title>
            <md-card-content>
                <p>
                    Content
                </p>
            </md-card-content>
            <md-button>Button</md-button>
        </md-card>
    </div>
    <!-- another card -->
</div>

This works fine, here is the picture. But what if i don't want to display cards strictly on the lines? Is there any way to get something like this?

Upvotes: 2

Views: 1633

Answers (1)

deadlocked247
deadlocked247

Reputation: 111

That kind of layout will require you to use some javascript to add to the view logic. Since each of your cards are using rows, it would not be currently possible to do that styling. I would check out http://masonry.desandro.com/

Upvotes: 2

Related Questions