html - 具有相同高度元素的响应式网格(从 3 列开始，减少到 2 列，然后是 1 列)？

Question

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

示例:

...我可以使用像这样的标记(如下)并使用 CSS 轻松完成此操作 display具有值的属性 table-row和 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>