• html頁面結構
  

  <div class="masonry">
      <div class="item">
          <img src="" >
      </div>
      <div class="item">
          <img src="" >
      </div>
      <div class="item">
          <img src="" >
      </div>
      ...
  </div>

• css樣式
  

  .masonry {
      column-count: 3;
  }
  
  .item {
      break-inside: avoid;
      box-sizing: border-box;
      padding: 10px;
  }
  
  @media (min-width: 400px) {
      .masonry {
          column-count: 3;
      }
  }
  
  @media (min-width: 1200px) {
      .masonry {
          column-count: 4;
      }
  }

• 頁面效果
  
  

參考網站： https://www.w3cplus.com/css/pure-css-create-masonry-layout.html

純CSS3實現瀑布流布局