【grid布局实现弹性换行元素大小一样且平均分布】

grid布局实现弹性换行元素大小一样且平均分布

想法

1、使子元素实现弹性布局即子元素平均分布且能自动换行
2、子元素拥有最小值，平均分布情况下父元素缩小，子元素也缩小，当子元素到达最小值时元素能自动换行，且不影响平均分布情况
3、保证每个元素大小都一样

<div class="box">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>


.box {
        display:grid;
        gap:12px;
        grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
        //实现自动填充，且子元素设置最大最小值，当达最小值时自动换行，
    }	
    .item {
        height:200px;
        border:1px solid #e8e8e8
    }