css如何设置block子元素平均分布，并指定个数

Question

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

想要实现block宽度分布自适应，并且指定每行显示多少个block，用display:flex实现的好像所有元素都指定在一行，无法换行，用指定百分比宽度如果是奇数行数就会出现两遍分布宽度不均等的问题例如width:33%，请问有没有完美的实现的方法

Answer 1

<div class="container">

<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

</div>
<style>
.container {

overflow: hidden;
background: green;

}
.block {

height: 100px;
background: red;
margin: calc(10% / 6);
width: 30%;
float: left;

}
</style>

Answer 2

display flex
flex-wrap wrap

Answer 3

不考虑兼容性的话，可以用grid