做卡片时经常会遇到卡片内容不同，导致高度撑开不相。如果此时想要高度相同的话可能会有种hacker代码，下面提供一种使用grid 和 flex 布局结合的处理方法，供参考。
原文地址： Equal Height Boxes with CSS Grid Layout
外部布局使用gird, 格子内部使用 flex，大致代码：
<!-- HTML结构 -->
<div class="auto-grid">
<div class="grid-box">
...
</div>
</div>
CSS 代码：
/* First the Grid */
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
grid-gap: 1.5rem;
justify-items: center;
margin: 0;
padding: 0;
}
上边代码效果其实也过的去，截图如下：
image.png
加上如下css 代码：
/* Added code */
.gallery-grid {
...
grid-auto-rows: 1fr;
}
展示结果如下：
image.png
这个示例非常简单，实际工作中格子内可能会有多个元素，按钮，图片什么，所以格式内可以再使用 flex 布局，代码如下：
/* CSS Flexbox */
.grid-box {
display: flex;
flex-flow: column nowrap;
...
}
只这样还是不够，因为元素的高度可能不一样，所以需要某些需要的元素上加上
/* Place elements at the bottom */
.m-top {
margin-top: auto;
}
如上，关键代码都有了。
这里貌似不能上传代码，所以示例请看原文
