CSS 响应式图库在几行后中断
CSS Responsive gallery break after few rows
我正在尝试从这个 tutorial. And here is my attempt on codesandbox.io
构建一个响应式图库
无论我尝试什么，都有一个小问题。它看起来不错，但在一半或一半之后的某个地方只显示四列而不是 5 列，如下图所示：
代码
CSS（不包括媒体查询）
#gallery {
line-height: 0;
-webkit-column-count: 5; /* split it into 5 columns */
-webkit-column-gap: 5px; /* give it a 5px gap between columns */
-moz-column-count: 5;
-moz-column-gap: 5px;
column-count: 5;
column-gap: 5px;
}
#gallery img {
width: 100% !important;
height: auto !important;
margin-bottom: 5px; /* to match column gap */
}
HTML
<body>
<div id="gallery">
<img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80">
<img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80">
<img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80">
</div>
</body>
感谢您的帮助。
//编辑
这看起来是我找到的最好的画廊 - https://codepen.io/maxvoltar/pen/eYOPdMG
教程取决于图像数量和图像尺寸。列垂直填充。本教程正好使用 24 张（小和大）图像。
还有两张图片，它适用于您的情况，如下所示。 运行代码，点击全屏，使用大屏分辨率可以看到5栏。
#gallery {
line-height: 0;
-webkit-column-count: 5; /* split it into 5 columns */
-webkit-column-gap: 5px; /* give it a 5px gap between columns */
-moz-column-count: 5;
-moz-column-gap: 5px;
column-count: 5;
column-gap: 5px;
}
#gallery img {
width: 100% !important;
height: auto !important;
margin-bottom: 5px; /* to match column gap */
}
@media (max-width: 1200px) {
#gallery {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media (max-width: 1000px) {
#gallery {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<meta name="description" content="Responsive Image Gallery" />
<meta name="author" content="Tim Wells" />
<style type="text/css"></style>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<meta name="description" content="Responsive Image Gallery" />
<meta name="author" content="Tim Wells" />
<link rel="stylesheet" href="/src/styles.css" />
<style type="text/css"></style>
</head>
<body>
<div id="gallery">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
</div>
</body>
</html>
也许一个好的解决方法是使用 flexbox，这可能还需要不同的 HTML 布局。
我不完全知道为什么网格在这种特定情况下让您失望，但我确实通过将您的 HTML 和 CSS 更改得更具体一些来解决了问题。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<meta name="description" content="Responsive Image Gallery" />
<meta name="author" content="Tim Wells" />
<link rel="stylesheet" href="/src/styles.css" />
<style type="text/css"></style>
</head>
<body>
<div id="gallery">
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
</div>
</body>
</html>
CSS
#gallery {
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin: 0 auto;
}
#gallery img {
object-fit: contain;
width: 100%;
padding-bottom: 2px;
}
.combo {
margin: 0;
padding: 0 2px;
width: 50%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
@media only screen and (min-width: 760px) {
.combo {
width: 33%;
}
}
@media only screen and (min-width: 1200px) {
.combo {
width: 20%;
}
}
一般来说，我不会将网格用于要用不确定数量的项目填充的容器。
网格最适合包含一定数量的特殊项目的容器，您希望响应式地四处移动。
此外，除非有特殊原因，否则我认为有必要设置容器宽度的上限。
这里是修改了flex-box和宽度上限的sandbox
https://codesandbox.io/s/mystifying-noyce-stpo9?file=/src/styles.css
我正在尝试从这个 tutorial. And here is my attempt on codesandbox.io
构建一个响应式图库无论我尝试什么，都有一个小问题。它看起来不错，但在一半或一半之后的某个地方只显示四列而不是 5 列，如下图所示：
代码 CSS（不包括媒体查询）
#gallery {
line-height: 0;
-webkit-column-count: 5; /* split it into 5 columns */
-webkit-column-gap: 5px; /* give it a 5px gap between columns */
-moz-column-count: 5;
-moz-column-gap: 5px;
column-count: 5;
column-gap: 5px;
}
#gallery img {
width: 100% !important;
height: auto !important;
margin-bottom: 5px; /* to match column gap */
}
HTML
<body>
<div id="gallery">
<img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80">
<img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80">
<img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"> <img src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80">
<img src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80">
</div>
</body>
感谢您的帮助。
//编辑 这看起来是我找到的最好的画廊 - https://codepen.io/maxvoltar/pen/eYOPdMG
教程取决于图像数量和图像尺寸。列垂直填充。本教程正好使用 24 张（小和大）图像。
还有两张图片，它适用于您的情况，如下所示。 运行代码，点击全屏，使用大屏分辨率可以看到5栏。
#gallery {
line-height: 0;
-webkit-column-count: 5; /* split it into 5 columns */
-webkit-column-gap: 5px; /* give it a 5px gap between columns */
-moz-column-count: 5;
-moz-column-gap: 5px;
column-count: 5;
column-gap: 5px;
}
#gallery img {
width: 100% !important;
height: auto !important;
margin-bottom: 5px; /* to match column gap */
}
@media (max-width: 1200px) {
#gallery {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media (max-width: 1000px) {
#gallery {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<meta name="description" content="Responsive Image Gallery" />
<meta name="author" content="Tim Wells" />
<style type="text/css"></style>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<meta name="description" content="Responsive Image Gallery" />
<meta name="author" content="Tim Wells" />
<link rel="stylesheet" href="/src/styles.css" />
<style type="text/css"></style>
</head>
<body>
<div id="gallery">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/><img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
</div>
</body>
</html>
也许一个好的解决方法是使用 flexbox，这可能还需要不同的 HTML 布局。
我不完全知道为什么网格在这种特定情况下让您失望，但我确实通过将您的 HTML 和 CSS 更改得更具体一些来解决了问题。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<meta name="description" content="Responsive Image Gallery" />
<meta name="author" content="Tim Wells" />
<link rel="stylesheet" href="/src/styles.css" />
<style type="text/css"></style>
</head>
<body>
<div id="gallery">
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
<div class="combo">
<img
src="https://images.unsplash.com/photo-1620827252031-146d52644aac?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80"
/>
<img
src="https://images.unsplash.com/photo-1620920709484-995504fbecd2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
/>
</div>
</div>
</body>
</html>
CSS
#gallery {
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
max-width: 1400px;
margin: 0 auto;
}
#gallery img {
object-fit: contain;
width: 100%;
padding-bottom: 2px;
}
.combo {
margin: 0;
padding: 0 2px;
width: 50%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
@media only screen and (min-width: 760px) {
.combo {
width: 33%;
}
}
@media only screen and (min-width: 1200px) {
.combo {
width: 20%;
}
}
一般来说，我不会将网格用于要用不确定数量的项目填充的容器。
网格最适合包含一定数量的特殊项目的容器，您希望响应式地四处移动。
此外，除非有特殊原因，否则我认为有必要设置容器宽度的上限。
这里是修改了flex-box和宽度上限的sandbox
https://codesandbox.io/s/mystifying-noyce-stpo9?file=/src/styles.css