CSS Grid Wrap列保持行高

Question

我不确定这是否完全可以通过CSS网格和/或CSS Flexbox解决，但是我想我可以在这里尝试一下。

https://codepen.io/anon/pen/QMOWwr

在Codepen中，您会看到一个具有多列的CSS网格，当视口太小时，它们会自动换行。 这就是它应该做的事情，而且使用CSS网格多么容易，这真是太好了。

但是，我还想拥有的是，基于该行中具有最高高度的单元格，行高是相等的。

为了说明这一点，我在每一列的一个单元格中添加了更多文本，并添加了一个<hr>元素来模拟边框-因此，就此而言，我想让<hr>标记在每一列中都处于相同的高度，以便单元格中的任意内容。

感谢任何提示，Marius

Answer 1

一种解决方案是使用JavaScript检查每一行中每个单元格的最大高度，然后相应地调整所有其他单元格的大小。

像这样的东西： https : //codepen.io/anon/pen/rzYaEY

但是，也许更惯用的解决方案只是使用<table>元素并相应地设置其样式。