<template>
  <div class="demo-row">
    <p>均分3份，各自占1个</p>
    <s-grid :cols="3">
      <s-grid-item>1</s-grid-item>
      <s-grid-item>2</s-grid-item>
      <s-grid-item>3</s-grid-item>
    </s-grid>
  </div>
  <div class="demo-row">
    <p>可以通过span跨列,2设置span:10</p>
    <s-grid :cols="12">
      <s-grid-item>1</s-grid-item>
      <s-grid-item :span="10">2</s-grid-item>
      <s-grid-item>3</s-grid-item>
    </s-grid>
  </div>
  <div class="demo-row">
    <p>内容过多自动换行，gap可设置间距</p>
    <s-grid :cols="6" :gap="[10,10]">
      <s-grid-item span="3">1</s-grid-item>
      <s-grid-item span="3">2</s-grid-item>
      <s-grid-item>3</s-grid-item>
      <s-grid-item>4</s-grid-item>
      <s-grid-item>5</s-grid-item>
      <s-grid-item>6</s-grid-item>
      <s-grid-item>7</s-grid-item>
      <s-grid-item>8</s-grid-item>
    </s-grid>
  </div>
  <div class="demo-row">
    <p>offset设置偏移</p>
    <s-grid :cols="6">
      <s-grid-item span="3">1</s-grid-item>
      <s-grid-item span="3">2</s-grid-item>
      <s-grid-item>3</s-grid-item>
      <s-grid-item>4</s-grid-item>
      <s-grid-item>5</s-grid-item>
      <s-grid-item>6</s-grid-item>
      <s-grid-item offset="1">7</s-grid-item>
    </s-grid>
  </div>
</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped>
.sel-grid {
  height: 100px;
}

.sel-grid-item {
  border: 1px solid #d2c5c5;
  text-align: center;
}

p {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
