不知道这个问题是简单还是否，但是我坚持了下去：是否可以创建一个灵活的自适应表格式布局，根据窗口宽度更改其列数？
插图：
（绿色边框表示块的初始大小（块内容的大小），黑色边框表示计算/渲染的块大小）
目标是创建一个布局，其中：
区块的排列方式就像表格一样-它们之间的空间相同，
一行的高度是该行中具有最大高度的块的高度，
列数根据窗口宽度而变化，例如，如果宽度小于300px，将有1列；如果宽度小于300px，将有2列-750px； 3列-> 1000px
实际上，我已经使用JS实现了这一点，并且PC很难执行我编写的脚本，因此我认为脚本进行了优化，但是无论如何，我希望可以使用纯CSS来完成。
我可以显示解决方案（CSS + JS），但我认为它没有价值。
最佳答案
Flexbox和媒体查询可以执行以下操作：
* {
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;
}
}<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>Codepen Demo
A Complete Guide to Flexbox @ CSS-Tricks.com
关于javascript - 如何创建灵活的自适应表格状布局？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38934927/