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

<style lang="scss">
.grid-container {
  overflow: hidden;
  display: grid;
  /* grid-template-columns: auto auto auto auto auto; //auto个数代表每行的个数,每列等宽 */
  /* grid-template-columns: 40px auto auto; //每列的宽度 */
  grid-template-columns: repeat(
    auto-fill,
    200px
  ); //列宽200px，个数不固定，用于响应式布局
  grid-gap: 10px 5px; //行和列间距
  background-color: #2196f3;
  margin: 10px;
  justify-content: center;

  &__li {
    background-color: rgba(255, 255, 255, 0.8);

    padding: 20px 0;
    font-size: 30px;
  }

  .item1 {
    grid-column: 1 / 3; //从第1列到第3列前(不包含3列) grid-column-start: 1;grid-column-end: 3;
    /* grid-column: 1 / span 3; //从第1列到第3列前(包含3列) */
  }

  .item2 {
    grid-row: 2 / 4; //从第2行到第4行前(不包含4行)
    /* grid-row: 2 / span 4; //从第2行到第4行前(包含4行) */
  }
}
</style>