求一个图片平均分布样式

[gudamzero]

希望css实现一个li平均分布的效果，基础要求是每行5列，第一列居左，最后一列居右，其他列的图片平均分布在剩余空间，图片与图片的间隔要是一样的。li数量不限。需要响应式适配，比如@media (max-width: 767px)，我需要变更为一行3列，图片的大小也要跟着缩小。

html如下：

<div>
<ul>
  <li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
<li><a><img/></a></li>
</ul>
</div>

 

[gudamzero]

@Tx的练习题 ``` ul { display: grid; justify-content: space-between; grid-template-columns: repeat(5, 192px); grid-row-gap: 40px; } li { width: 192px; height: 192px; background-color: red; } img { width: 100%; object-fit: cover; } ```

[gudamzero]

@Tx的练习题 谢谢，但是你这样不行，太简单了，不过其实是我想复杂了，没把grid研究好，现在已经完美实现了。

[Tx的练习题]

给div设置宽度和高度
然后

.ul_Class {
  display: flex;
  flex-wrap: wrap;
}
.li_Class {
  flex-basis: 20%;
  text-align: center;
}