CSS换行均匀分布的布局

想要实现一个如图的布局方式，说一下前提条件，不用js，父元素的宽度未知，子元素的宽度可知，让子元素在父元素均匀分布，一行无法摆出更多的子元素时换行，换行的子元素也保持同样的分布。

找了很多资料，加上自己的想法，有两个方案

1. 使用flex布局，子元素宽度设置为百分比，补上相应数量的子元素，并且隐藏它们（z-index:-1;或者height：0;），最后一排就可以均匀的显示，而不是只显示在两侧。通过媒体查询，不同的尺寸设置不同的子元素宽度，就可以得到不同的列数。把每种尺寸情况补充的子元素通过媒体查询显示。

.list{
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.list-item{
	width:49%;
}
@media only screen and (min-width: 600px) {
	.list-item{
		width:24%;
	}
}

2. 使用grid布局，适用于子元素宽度为固定px。不太了解grid，查资料时搜到这种方法。试了一下，确实很好用。

.list {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(auto-fill, 50px);
    grid-gap: 32px;
}