HTML / CSS中具有相同行高的多列

Question

我正在一个网站上，设计师在主页上要求提供以下格式：

News     Notices  Events
Item 1   Item 1   Item 1
Blurb    Blurb    Blurb
Blurb             Blurb
Blurb

Item 2   Item 2   Item 2
Blurb    Blurb    Blurb
Blurb    Blurb
         Blurb

这个想法是每个项目应该具有相同的水平高度。我可以通过以下方式使用div轻松完成此操作：

<div class="row">
  <div>News</div>
  <div>Notices</div>
  <div>Events</div>
</div>
<div class="row">
  <div>Item 1</div>
  <div>Item 1</div>
  <div>Item 1</div>
</div>
<div class="row">
  <div>Item 2</div>
  <div>Item 2</div>
  <div>Item 2</div>
</div>

然而，这不是很好的信息架构 - 特别是因为我想为小/窄/移动屏幕堆叠新闻，通知和事件列。

无论如何，我能得到设计师想要的结果，但仍保留正确的信息架构吗？

更新

使用jQuery在页面加载时重新调整网格后，我展示了设计师。一旦他意识到我们对用户放入CMS的内容几乎没有控制权，并且网格中的内容不平衡，他就能掌握整个想法。

所以我不需要这个答案，但我会出于好奇而坚持下去。

Answer 1

查看以下内容。应该给你一些想法：

http://spyrestudios.com/css-grid-systems/