实现微信朋友圈图片九宫格布局

核心点就两个：第一，实现行列间都等间距，使用 grid 布局。第二，图片不拉伸覆盖容器 object-fit 属性。

 <style>
    .imageList {

      width: 100%;

      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 设置列数 */
      gap: 10px; /* 设置行和列之间的间距 */

    }

    .imageList-item {

      max-width: 100%;
      aspect-ratio: 1;
      line-height: 0;
      position: relative;
      object-fit: cover; /* 保持比例不拉伸，并覆盖容器 */
      object-position: center; /* 居中展开 */
    }


  </style>

  <div class="imageList">
      <img class="imageList-item" src="/41196.jpg">
      <img class="imageList-item" src="/1196.jpg">
      <img class="imageList-item" src="/1196.jpg">

  </div>
</body>