CSS网格中的等高行答案

【问题标题】：Equal height rows in a CSS gridCSS网格中的等高行
【发布时间】：2017-01-06 01:52:52
【问题描述】：

我正在使用一个简单的网格框架 (http://www.modestgrid.com/)，具有固定的行数。是否有任何简单的方法可以使所有行的高度相同，而无需将.row 类的高度指定为百分比？

我的 6 行行类如下所示：

.row {
    height: 16.666%;
    padding-bottom: 5px;
}

.row:last-of-type {
    padding-bottom: 0;
}

有没有办法不必指定 height: 16.666%; 并让 CSS 自动使所有行具有相同的高度并让它们垂直填充其容器元素？

我想我可以使用<table> 或 JavaScript 来完成此操作，但我希望有一个纯 CSS 解决方案。我需要支持 IE10 和所有最新的其他常用浏览器。

【问题讨论】：

寻找flexbox。
我不相信我可以在 IE10 中使用它。
IE10 是第一个支持 Flexbox 的版本。我不知道它是否有错误，很可能。
IE === 错误 :-)
CSS 属性“display:table”怎么样？

标签： css grid-layout

【解决方案1】：

使用显示：表格。

It's supported in IE8+ and has a decent support in other browsers as well.

html,
body,
.wrapper {
  height: 100%;
}
.wrapper {
  display: table;
}
.row {
  display: table-row;
  padding-bottom: 5px;
}
.row:last-of-type {
  padding-bottom: 0;
}

<div class="wrapper">
  <div class="row">
    <div>
      Row 1
    </div>
  </div>
  <div class="row">
    <div>
      Row 2
    </div>
  </div>
  <div class="row">
    <div>
      Row 3
    </div>
  </div>
  <div class="row">
    <div>
      Row 4
    </div>
  </div>
  <div class="row">
    <div>
      Row 5
    </div>
  </div>
  <div class="row">
    <div>
      Row 6
    </div>
  </div>
</div>

没有适度网格的解决方案：JSFiddle

适度网格的解决方案：JSFiddle

【讨论】：