<div class="grid-content"> <div class="grid-content-item" v-for="(item,index) in data"> <div style="width: 100%;height: 100%;background-color: white;border-radius: 8px"> <el-image :src="item.img" style="width: 100%;height: 188px;border-top-right-radius: 8px;border-top-left-radius: 8px"></el-image> </div> </div> </div>
CSS:
.grid-content{ display: grid; grid-template-columns: auto auto auto auto; grid-gap: 40px 40px } .grid-content-item{ grid-template-rows: 350px; display: flex; align-items: center; justify-content: start; flex-direction: row; }
缺点:在firefox 中可能因为浏览器放大,出现样式异常
样式预览: Chrom中样式
firefox中样式: