材料设计：网格带卡自动高度

Question

我希望有一个卡片自动高度的网格，如下所示：

我使用Material Design和Angular 4，如果有一些React或VueJS的解决方案也会很好。 我开始使用依赖flex-layout，但我总是这样：

这是我的代码：

 <div class="row" fxLayout="row" fxLayout.xs="column" fxFlexFill fxFlexAlign="center">
        <div class="col-sm-3">
            <div class="card bg-color-white">

                <div class="card-content">
                    <p>Original Content podcast: Neqsqsdqsdqsdqsdqsdqsdqsdqsdqsdqsdqsdqsdqsddqdqsdqsdqsdqsdqsdtflix’s ‘Queer Eye’ revival feels surprisingly heartfelt  by @anthonyha and @jordanrcrook and @jshieber</p>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="card bg-color-white">

                <div class="card-content">
                    <p>Original Content podcast: Netflix’s ‘Queer Eye’ revival feels surprisingly heartfelt by @anthonyha and @jordanrcrook and @jshieber</p>
                </div>
            </div>
        </div>   <div class="col-sm-3">
        <div class="card bg-color-white">

            <div class="card-content">
                <p>Original Content podcast: Netflix’s ‘Queer Eye’ revival feels surprisingly heartfelt by @anthonyha and @jordanrcrook and @jshieber</p>
            </div>
        </div>
    </div>   <div class="col-sm-3">
        <div class="card bg-color-white">

            <div class="card-content">
                <p>Original Content podcast: Netflix’s ‘Queer Eye’ revival feels surprisingly heartfeltby @anthonyha and @jordanrcrook and @jshieber</p>
            </div>
        </div>
    </div>
        <div class="col-sm-3">
            <div class="card bg-color-white">

                <div class="card-content">
                    <p>Original Content podcaqfdsdglklklkdfkgldfklglkdflkgdfklgkldfgkldfklgkldfgkldfkglst: Netflix’s ‘Queer Eye’ revival feels surprisingly heartfelt  by @anthonyha and @jordanrcrook and @jshieber</p>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="card bg-color-white">

                <div class="card-content">
                    <p>Original Content podcast: Netflix’s ‘Queer Eye’ revival feels surprisingly heartfelt  by @anthonyha and @jordanrcrook and @jshieber</p>
                </div>
            </div>
        </div>   <div class="col-sm-3">
        <div class="card bg-color-white">

            <div class="card-content">
                <p>Original Content podcast: Netflix’s ‘Queer Eye’ revival feels surprisingly heartfelt  by @anthonyha and @jordanrcrook and @jshieber</p>
            </div>
        </div>
    </div>
        <div class="col-sm-3">
            <div class="card bg-color-white">

                <div class="card-content">
                    <p>Original Content podcast: Netflix’qsdqsdqsd qsfdsgsfgsfhdgjgsd s sdgsfhdf s ‘Queer Eye’ revival feels surprisingly heartfelt h by @anthonyha and @jordanrcrook and @jshieber</p>
                </div>
            </div>
        </div>
    </div>

Answer 1

你绝对可以使用角度材料包中的材料卡，结合角度柔性布局（即[1]，[2]）来制作非常灵活的布局组合。

特别注意我发布的第二个链接，其中显示了几个与您想要实现的类似的示例。