MaterializeCSS の Cards の高さを揃える方法

MaterializeCSS とは

CSS のフレームワークです。

Cards Components

Materialize にはいわゆる「カード型」のコンポーネントを生成できる API*1 があります。

カードを並べると高さが揃わないことがある

このカードをそのまま並べていくと、以下のように高さが揃わないことがあります。

高さを揃えるために CSS を書いて適用する

以下のようにカードの高さを揃えたいと思います。

そのためには以下のように Flexbox の CSS を書いて適用してあげればよいです。

.flex {
  display: flex;
  flex-wrap: wrap;
}

適用する場所は col を包み込む row のところです。

<div class="row flex">
  <div class="col"></div>
  <div class="col"></div>
</div>

補足

カードの高さを同一にする（画像参照）ためにはそれぞれのカードの CSS に height: XXXpx; を与えればいいです。ただし、全てのカードが強制的に指定した高さになることには注意です*2。

あともう一点、カードの数が列数で割り切れない場合は、最終行で余りの分のカードが右側に寄ってしまいます。これは CSS で解決しないほうがスマートかと思いました*3。

参考（という名の答え）

*1:っていう言い方でいいんでしょうか

*2:「すべてのカードの中で最大の高さになるカードの高さ」が、きれいなレイアウト時の height に与えられる最低値となります

*3:確信ではないです