具有相同高度的列的响应式网格答案

【问题标题】：Responsive grid with columns of same height具有相同高度的列的响应式网格
【发布时间】：2018-04-22 05:58:52
【问题描述】：

我正在努力解决应该是一个简单的布局问题

我有一个包含 4 个标题框的布局。当 4 跨（“桌面”视图）时，4 个框需要具有相同的高度。当 2 跨（“平板电脑”视图）时，它们还需要具有相同的高度。当全宽（“移动”视图）时，高度无关紧要。

我已经设置了一个 Fiddle 来显示我当前拥有的内容以及它响应时会发生什么。

<div class="report_v3_summary_box">

是给内容加背景色，列响应时加边距。

请问大家有什么建议吗？

谢谢

【问题讨论】：

【解决方案1】：

在我看来，您有两个选择：CSS 或 JS。

通过 JS，您可以使用像 matchheight 这样的 jquery 库。

使用 CSS，首选方法，您可以使用 flexbox 属性来获得所需的效果。 Here's a really nice guide 到 flexbox。 Here's an example（在底部）。

您基本上需要的是（在父容器上，即您的情况下的行）：

flex-wrap: wrap;
display: flex;

然后，在.report_v3_summary_box：

height: 100%;

并将边距底部移动到：.col.l3.m6.s12。

【讨论】：

谢谢 lehel - 这正是我所需要的。由于 IE11 支持，我一直远离 Flexbox，但在这种情况下，我测试时它似乎可以工作。
不客气。就我个人而言，我对 flexbox 和 IE11 没有任何问题，但 caniuse 说这只是部分支持。我可以想象并不是 flexbox 的所有功能都被实现（或正确实现），但像这样简单的事情就是。 caniuse.com/#search=flexbox

【解决方案2】：

既然我们在 2017 年，也许您可以使用“网格”。这是一个示例，您可以如何以最少的努力做到这一点：

1 x 4 列的示例 CSS：

.grid-container {
    grid-template-rows: 1fr; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
}

容易吗？

【讨论】：