没有行的CSS3网格系统

Question

简而言之，我希望拥有一个响应式网格系统，而不使用行来保持它们尽可能动态。我得到的最好的方法就是这个：

* { box-sizing: border-box; }

.wrapper {
  font-size: 0;
  border: 1px solid blue;
}

.item {
  font-size: 16px;
  vertical-align: top;
  width: 25%;
  border: 2px dashed #F44336;
  display: inline-block;
  padding: 20px;
}

.item.c1-2 { width: 50%; }
.item.c2-3 { width: 66.66%; }
.item.c1-3 { width: 33.33%; }

<div class="wrapper">
  <div class="item">One Line.</div>
  <div class="item">Two<br>Lines.</div>
  <div class="item">Three<br>Lines<br>Here.</div>
  <div class="item">Four<br>Lines.<br><br>Yes, Really.</div>
  <div class="item c2-3">Big Line.</div>
  <div class="item c1-3">Small Line.</div>
  <div class="item c1-2">Equal Line.</div>
  <div class="item c1-2">Equal Line.</div>
</div>

我在这里想念的是，当它们在一行中时，我不能使它们的高度相等，让它们看起来像这样：

现在我正在寻找一种解决方案，使它们的高度相等，而不使用项目的行。 Flexbox解决方案是受欢迎的，因为我不必支持旧浏览器; JS解决方案也没关系。

Answer 1

喜欢这个吗？

我添加了这些CSS选项：

 display: flex;
 flex-wrap: wrap;

 display: inline-flex;

* { box-sizing: border-box; }

.wrapper {
  font-size: 0;
  border: 1px solid blue;
  display: flex;
  flex-wrap: wrap;
}

.item {
  font-size: 16px;
  vertical-align: top;
  width: 25%;
  border: 2px dashed #F44336;
  display: inline-flex;;
  padding: 20px;
}

.item.c1-2 { width: 50%; }
.item.c2-3 { width: 66.66%; }
.item.c1-3 { width: 33.33%; }

<div class="wrapper">
  <div class="item">One Line.</div>
  <div class="item">Two<br>Lines.</div>
  <div class="item">Three<br>Lines<br>Here.</div>
  <div class="item">Four<br>Lines.<br><br>Yes, Really.</div>
  <div class="item c2-3">Big Line.</div>
  <div class="item c1-3">Small Line.</div>
  <div class="item c1-2">Equal Line.</div>
  <div class="item c1-2">Equal Line.</div>
</div>

Answer 2

你在找这样的东西吗？

JSFIDDLE