响应网格与相同高度的列

Question

我正在努力应对简单的布局问题

我有一个带有4个标题框的布局。 当4对（＆＃34;桌面和＃34;视图）时，4个框需要相同的高度。 当横跨2时，它们也需要具有相同的高度（＆＃34;平板电脑＆＃34;视图）。 当全宽（＆＃34;移动＆＃34;视图）时，高度并不重要。

我设置了一个小提琴来展示我现在拥有的东西＆amp;它回应时会发生什么。

https://jsfiddle.net/c5oumq2z/

在

<div class="report_v3_summary_box">

是为内容添加背景颜色，并在列响应时添加边距。

有人有任何建议吗？

由于

Answer 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。

Answer 2

因为我们在2017年，你可以使用＆＃34; Grid＆＃34;。 以下是一个如何以最小的努力完成此任务的示例：

https://jsfiddle.net/herrfischerhamburg/ym2rc6tm/1/ （调整浏览器窗口大小，它具有响应性）

1 x 4列的CSS示例：

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

易？