Css 具有媒体查询功能的快速、流畅的缩略图网格

我使用媒体查询，为响应迅速且流动的缩略图网格提出了此解决方案：

HTML

<div class="container>
  <div class="thumbnail">
    <img src="https://placekitten.com/g/250/250" alt="..." />
  </div>
  <div class="thumbnail">
    <img src="https://placekitten.com/g/250/250" alt="..." />
  </div>
  <div class="thumbnail">
    <img src="https://placekitten.com/g/250/250" alt="..." />
  </div>
  </div>
  <div class="thumbnail">
    <img src="https://placekitten.com/g/250/250" alt="..." />
  </div>
  <div class="thumbnail">
    <img src="https://placekitten.com/g/250/250" alt="..." />
  </div>
  //...

</div>  

这种方法有什么问题吗

---

我不想为此而使用大量媒体查询，但考虑到它基本上只使用媒体查询，而媒体查询得到广泛支持，对于没有水槽的网格来说，这似乎是一个不错的解决方案。

尝试使用flex layout，而不编写太多媒体查询。 看。
您将有类似于：

.container {
 display: flex; 
}
.thumbnail {
 flex: 1;
}
.thumbnail > img {
 width: 100%;
 height: auto;
}

.container {
 display: flex; 
}
.thumbnail {
 flex: 1;
}
.thumbnail > img {
 width: 100%;
 height: auto;
}