Bootstrap 的 Grid 排版，常會搭配 Card 卡片來進行顯示。不過 Card 元件會遇上一個常見問題：如何讓卡片在動態內容的情形下，維持每張卡片是一樣高的？這邊筆記下實作方法和思路。
思路
整體是一個四層 div 所組成的架構
1. 在採用 bootstrap 的 grid 系統模式下，最外層套用 flex，並使用 flex-wrap: wrap 和 flex-direction: row 來確保呈現順序為由左至右，由上而下
2. 第二層是卡片的 wrapper，在這層決定卡片間距、寬度、陰影…等細節。若你卡片間有 margin 的話，那你寬度需要扣除
3. 第三層是卡片本體的 div，寬度繼承第二層的 div，採用 flex 格局但 flex-direction 設為 column，這樣一來才能讓最裡層的所有元素有機會套用 flex-grow
4. 最裡層的元素，挑其一適用 flex-grow: 1。這樣一來指定區域就會按照比例放大。
