CSS响应式画廊在几行后中断答案

【问题标题】：CSS Responsive gallery break after few rowsCSS响应式画廊在几行后中断
【发布时间】：2021-05-13 20:04:33
【问题描述】：

我正在尝试从这个tutorial 构建一个响应式画廊。这是我对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

【问题讨论】：

@Paulie_D 这就是为什么我也写了代码，甚至是最短的我没有包含媒体查询
@Paulie_D 因为将图像链接放入其中是没有意义的，因为它可能会变得无效，然后对于具有相同问题的未来 SO 用户将没有任何价值。见meta.stackoverflow.com/questions/254428/…
无论如何更新链接和帮助仍然受欢迎:)
有趣的问题。让我测试这个而不是看电视:)

标签： html css responsive image-gallery

【解决方案1】：

我不完全知道为什么网格在这种特定情况下会失败，但我确实通过将 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 和宽度上限修改的沙盒。

https://codesandbox.io/s/mystifying-noyce-stpo9?file=/src/styles.css

【讨论】：

【解决方案2】：

教程取决于图片数量和图片尺寸。列垂直填充。本教程使用了 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 布局。

【讨论】：