我这里设置的是一行3个间隔20px 我用的是vue

<ul ref="scrollView" class="shop-list" @click.stop="handleImgClick($event)" > <li v-for="(item, index) in slidelist" :key="index" class="item-li" > <p class="item-title"> <i class="langIcon"/>{{ item.activity_name }} </p> <div class="item-img-list"> <img v-for="(img, idx) in item.dataList" :key="idx" :src="img" :data-curData="item.activity_code" :data-codes="item.rus_codes[idx]" :data-region="item.region" > </div> </li> </ul>

css

.item-img-list { width: 100%; display: grid; grid-template-columns: repeat(3, 30%); grid-template-rows: repeat(3, 30%); grid-column-gap: 20px; grid-row-gap: 20px; img { width: 100%; height: 100%; } }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。