css 九宫格图片

<div class="all-img">
    <div v-for="(item, i) in art" :key="i" class="grid-item">
        <img class="img-item" :src="item" />
     </div>
</div>
 
.all-img {
      margin: 0 auto;
      width: 300px;
      height: 300px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start; /* 解决当为4-6个图片时换行平分剩余空间问题 */
      .grid-item {
        width: calc(calc(100% / 3) - 4px);
        height: calc(calc(100% / 3) - 4px);
        margin: 2px;
      
        .img-item {
          width: 100%;
          height: 100%;
        }
      }
}