1. 卡片定宽，两侧间距根据容器宽度变化
<template><div class="wrapper"><div class="card-list-layout"><div v-for="item in cardList" :key="item.id" class="card-item"></div></div></div>
</template><script>
export default {data() {return {cardList: []}},created() {for (let i = 0; i < 30; i++) {this.cardList.push({id: i + 1})}}
}
</script><style lang="scss" scoped>
.wrapper {width: 100%;height: 100%;padding: 10px 0;.card-list-layout {width: 100%;height: 100%;display: grid;grid-gap: 16px;grid-template-columns: repeat(auto-fill, 355px);justify-content: center;align-content: flex-start;overflow: auto;}.card-item {width: 355px;height: 172px;background: rgb(255, 255, 255);border: 1px solid rgba(0, 0, 0, 0.12);border-radius: 4px;padding: 16px;}
}
</style>
2. 两侧间距不变，卡片宽度根据容器宽度变化
<template><div class="wrapper"><div class="card-list-layout"><div v-for="item in cardList" :key="item.id" class="card-item"></div></div></div>
</template><script>
export default {data() {return {cardList: []}},created() {for (let i = 0; i < 30; i++) {this.cardList.push({id: i + 1})}}
}
</script><style lang="scss" scoped>
.wrapper {width: 100%;height: 100%;padding: 20px;.card-list-layout {width: 100%;height: 100%;display: grid;grid-gap: 16px;grid-template-columns: repeat(auto-fill, minmax(356px, 1fr));justify-content: center;align-content: flex-start;overflow: auto;}.card-item {display: flex;padding: 16px;background: rgb(255, 255, 255);border: 1px solid rgba(0, 0, 0, 0.12);border-radius: 4px;height: 172px;}
}
</style>
