一个响应网格（从3列开始，一直到2列，然后是1），具有相同高度的项目？

Question

例如，如果我想要一个每行3列的网格，并且还想确保行中的每个项目具有相同的高度而不必专门设置它（想想<table>）..

示例：

...我可以通过这样的标记（下面）轻松实现这一点，并使用值为display和table-row的CSS table-cell属性：

<div class="table-row">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>

至于两列，我们会这样做：

<div class="table-row">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>

我的问题是：如何根据屏幕尺寸创建一个从3列缩小到2和1的响应式网格，并确保行中的所有项目都具有相同的高度而不需要我具体设置（如<table>）？

注意：使用什么CSS属性或者需要如何修改HTML标记并不重要。如果您只有一个想法，请随意分享评论，以便我可以进行试验并分享答案，如果它有效。

PS： 我找不到执行此操作的框架。大多数从3比1缩放，或者即使他们做3-2-1（使用float），它们也不会保持行中项目的相同高度，这在我的设计中是最重要的。

Answer 1

由 flexbox 解决。 Caniuse

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
body {
  background-color: #333;
}
.container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -o-box-orient: horizontal;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: distribute;
  -moz-box-pack: distribute;
  -o-box-pack: distribute;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.container__item {
  min-width: 200px;
  margin: 10px;
  background-color: #fff;
  max-width: 300px;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -o-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.container__img {
  object-fit: cover;
  width: 100%;
}
.container__title,
.container__content {
  opacity: 0.99;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
  filter: alpha(opacity=99);
}

<div class="container">
  <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/>
    <div class="container__title">Title</div>
    <div class="container__content"> Lorem ipsum </div>
  </div>
  <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/>
    <div class="container__title">Title</div>
    <div class="container__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestias excepturi omnis expedita, aliquid laborum in est tempore velit qui aspe illum fugiat enim!</div>
  </div>
  <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/>
    <div class="container__title">Title</div>
    <div class="container__content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestias excepturi omnis expedita, aliquid laborum in est tempore velit qui aspernatur consectetur consequatur soluta quis alias possimus illum fugiat enim!</div>
  </div>
  <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/>
    <div class="container__title">Title</div>
    <div class="container__content"> Lorem </div>
  </div>
  <div class="container__item"><img src="http://placehold.it/200x150" alt="" class="container__img"/>
    <div class="container__title">Title</div>
    <div class="container__content"> Lorem</div>
  </div>
</div>