css 行内容高度的自适应

做卡片时经常会遇到卡片内容不同，导致高度撑开不相。如果此时想要高度相同的话可能会有种hacker代码，下面提供一种使用grid 和 flex 布局结合的处理方法，供参考。
原文地址： Equal Height Boxes with CSS Grid Layout

外部布局使用gird, 格子内部使用 flex，大致代码：

  

    ...
  

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;
}

如上，关键代码都有了。

这里貌似不能上传代码，所以示例请看原文