css3grid

grid基础布局

<template>
  <div class="grid-container">
    <div class="grid-container__li item8" v-for="(item, index) in 15" :key="index">{{ index }}</div>
  </div>
</template>

<style lang="scss">
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto; //auto个数代表每行的个数
  grid-gap: 10px 5px; //行和列间距
  background-color: #2196F3;
  margin: 10px;

  &__li {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
  }
}
</style>
上次更新: