{
  "Print to console": {
    "prefix": "grid-row",
    "body": [
      "<template>",
      "  <div class='grid-container'>",
      "    <template v-for='(item, index) in 6' :key='index'>",
      "     <div class='grid-container__li '  :class='{item1: index == 0,item2: index == 1, }'>",
      "      {{index +1}} $1",
      "     </div>",
      "   </template>",
      "  </div>",
      "</template>\n",
      "<script setup>",
      "    let data = reactive({",
      "    })",
      "    onMounted(()=>{",
      "    })",
      "    watch(()=>data, (newVal, old) => {",
      "    },{ immediate: true})",
      "</script>\n",
      "<style  lang=\"${2:scss}\" scoped>\n",
      ".grid-container {",
      "  overflow: hidden;",
      "  display: grid;",
      "  grid-template-columns: 40px auto ; //每列的宽度",
      "  /* grid-template-columns: repeat(auto-fill, 200px); //列宽200px，个数不固定，用于响应式布局 */",
      "  grid-gap: 10px 5px; //行和列间距",
      "  margin: 15px;",
      "  background-color: #2196F3;",
      "  &__li {",
      "    background-color: rgba(255, 255, 255, 0.8);padding: 20px 0;",
      "  }",
      "  .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>\n"
    ],
    "description": "grid-row"
  }
}