卡片布局自适应：网格布局（display: grid；）

原创已于 2025-06-12 17:22:55 修改 · 419 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

于 2025-05-20 15:29:50 首次发布

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;
    /* 网格会自动生成多列，每列最小356px，最大可以平分一行的剩余空间。 */
    grid-template-columns: repeat(auto-fill, minmax(356px, 1fr));
    /* grid-template-columns: repeat(auto-fit, minmax(356px, 1fr)); */
    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>