材料设计：带有卡片自动高度的网格答案

【问题标题】：Material Design : Grid with cards auto height材料设计：带有卡片自动高度的网格
【发布时间】：2018-04-14 12:25:29
【问题描述】：

我正在寻找一个带有卡片自动高度的网格，如下所示：

我正在使用 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>

【问题讨论】：

自动高度的意思是每张卡片都和它的内容一样大？
如附件图片所示
对于像我这样无法看到@StrangerB 的问题的人。结果是，我认为是第二行的牌顶都是偶数，而不是推到第一行的牌底。
@StrangerB。如果您能准确描述您获得的结果与您在问题中想要的结果之间的问题，那将会很有帮助。

标签： angular material-design angular-material

【解决方案1】：

您绝对可以使用 angular-material 包中的材质卡，结合 angular flex 布局（即[1]、[2]）来制作真正灵活的布局组合。

特别是看一下我发布的第二个链接，它显示了几个与您想要实现的目标相似的示例。

【讨论】：