如何创建灵活的自适应表格式布局？

Question

不知道这个问题是简单还是没有，但我坚持下去：是否有可能创建一个灵活的自适应表格式布局，根据窗口宽度改变它的列数量？

插图： （ 绿色 边框表示初始块的大小（块内容的大小），黑色边框表示计算/呈现块的大小）

目标是创建一个布局：

1. 块在表格中对齐 - 它们之间具有相同的空间，
2. 行的高度是此行中具有最大高度的块的高度，
3. 列数量会根据窗口宽度而变化，例如，如果宽度小于300px，则会有1列，2列 - 500px，3列 - 750px和4列 - > 1000px

实际上，我已经用JS实现了这一点，我的PC不是很难执行我编写的脚本，所以我认为脚本已经很好地优化了，但无论如何我希望它可以用纯CSS完成。

我可以展示我的解决方案（CSS + JS），但我认为它没有任何价值。

Answer 1

Flexbox和媒体查询可以执行此操作：

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 80%;
  margin: auto;
  border: 1px solid red;
  padding: 1em;
}
.box {
  border: 1px solid grey;
  margin-bottom: 1em;
  flex: 1 0 100%;
  background: #c0ffee;
  padding: 0 1em;
}
@media screen and (min-width: 500px) {
  .box {
    flex: 0 0 48%;
    background: #bada55;
  }
}
@media screen and (min-width: 750px) {
  .box {
    flex: 0 0 30%;
    background: rebeccapurple;
  }
}
@media screen and (min-width: 1000px) {
  .box {
    flex: 0 0 24%;
    background: #b19d09;
  }
}

＆＃13;

<div class="wrapper">
  <div class="box">
    <p>Lorem ipsum dolor sit.</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, totam.</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, cum. Voluptate natus quaerat eaque incidunt, accusamus veniam facere, alias provident odio est rerum commodi?</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, dolore.</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit.</p>
  </div>
  <div class="box">
    <p>lorem</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nobis odit possimus porro. Nihil, modi.</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium vel, accusamus cupiditate esse quisquam, nisi hic dolores assumenda adipisci, illum ab itaque nemo placeat! Dolorum aliquam iure veritatis reprehenderit libero.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Codepen Demo

A Complete Guide to Flexbox @ CSS-Tricks.com