# 网格 - Grid

# 预览及使用方法

col-24
col-12
col-12
col-8
col-8
col-8
col-6
col-6
col-6
col-6
<template>
  <div class="grid-wrapper content">
    <g-row class="row">
      <g-col class="item" span="24">col-24</g-col>
    </g-row>
    <g-row>
      <g-col class="item" span="12">col-12</g-col>
      <g-col class="item" span="12">col-12</g-col>
    </g-row>
    <g-row class="row">
      <g-col class="item" span="8">col-8</g-col>
      <g-col class="item" span="8">col-8</g-col>
      <g-col class="item" span="8">col-8</g-col>
    </g-row>
    <g-row class="row">
      <g-col class="item" span="6">col-6</g-col>
      <g-col class="item" span="6">col-6</g-col>
      <g-col class="item" span="6">col-6</g-col>
      <g-col class="item" span="6">col-6</g-col>
    </g-row>
  </div>
</template>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.grid-wrapper {
  $background: #3eaf7c;
  > .row {
    padding: 0.2em;
    > .item {
      text-align: center;
      color: white;
      padding: 0.2em;
      &:nth-child(odd) {
        background: $background;
      }
      &:nth-child(even) {
        background: lighten($background, 20%);
        color: black;
      }
    }
  }
}
</style>

# 相关提示:

# Row 选项

# 1、gutter

通过给 Row 设置 gutter 属性, 可以让栅格有间隔,单位为 px

col-8; gutter-30;
col-8; gutter-30;
col-8; gutter-30;
col-8; gutter-20;
col-8; gutter-20;
col-8; gutter-20;
col-8; gutter-10;
col-8; gutter-10;
col-8; gutter-10;
<template>
  <div class="gutter-wrapper">
    <g-row gutter="30">
      <g-col class="item" span="8">
        <span>col-8; gutter-30;</span>
      </g-col>
      <g-col class="item" span="8">
        <span>col-8; gutter-30;</span>
      </g-col>
      <g-col class="item" span="8">
        <span>col-8; gutter-30;</span>
      </g-col>
    </g-row>
    <g-row gutter="20">
      <g-col class="item" span="8">
        <span>col-8; gutter-20;</span>
      </g-col>
      <g-col class="item" span="8">
        <span>col-8; gutter-20;</span>
      </g-col>
      <g-col class="item" span="8">
        <span>col-8; gutter-20;</span>
      </g-col>
    </g-row>
    <g-row gutter="10">
      <g-col class="item" span="8">
        <span>col-8; gutter-10;</span>
      </g-col>
      <g-col class="item" span="8">
        <span>col-8; gutter-10;</span>
      </g-col>
      <g-col class="item" span="8">
        <span>col-8; gutter-10;</span>
      </g-col>
    </g-row>
  </div>
</template>
<style lang="scss" scoped>
  * { box-sizing: border-box; }
  .gutter-wrapper { padding-top: 10px;
    .item { text-align: center; color: white;
      > span { display: block; background: #3eaf7c; }
    }
  }
</style>

# 2、align

通过给 Row 设置 align 属性, 可以定义其子组件在该节点里面的排版方式。

left
left
center
center
right
right
<template>
  <div class="align-wrapper content">
    <g-row class="row" align="left">
      <g-col class="item" span="8">left</g-col>
      <g-col class="item" span="8">left</g-col>
    </g-row>
    <g-row class="row" align="center">
      <g-col class="item" span="8">center</g-col>
      <g-col class="item" span="8">center</g-col>
    </g-row>
    <g-row class="row" align="right">
      <g-col class="item" span="8">right</g-col>
      <g-col class="item" span="8">right</g-col>
    </g-row>
  </div>
</template>
<style lang="scss" scoped>
$background: #3eaf7c;
* {
  box-sizing: border-box;
}
.align-wrapper {
  text-align: center;
  color: white;
  .row {
    padding-top: 10px;
    > .item {
      text-align: center;
      color: white;
      &:nth-child(odd) {
        background: $background;
      }
      &:nth-child(even) {
        background: lighten($background, 20%);
        color: black;
      }
    }
  }
}
</style>

# Col 选项

# 1、span

栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。通过设置 span 属性来实现。

# 2、offset

使用 offset 属性,可以将列向右侧偏。 例如,offset="4" 将元素向右侧偏移了 4 个列(column)的宽度。

col-8
col-8
col-4
col-8
col-5
col-4
col-2
col-5
col-4
<template>
  <div class="offset-wrapper">
    <g-row class="row">
      <g-col class="item" span="8">
        <span>col-8</span>
      </g-col>
      <g-col class="item" span="8">
        <span>col-8</span>
      </g-col>
      <g-col class="item" span="4" offset="4">
        <span>col-4</span>
      </g-col>
    </g-row>
    <g-row class="row">
      <g-col class="item" span="8">
        <span>col-8</span>
      </g-col>
      <g-col class="item" span="5" offset="3">
        <span>col-5</span>
      </g-col>
      <g-col class="item" span="4" offset="4">
        <span>col-4</span>
      </g-col>
    </g-row>
    <g-row class="row">
      <g-col class="item" span="2" offset="6">
        <span>col-2</span>
      </g-col>
      <g-col class="item" span="5" offset="3">
        <span>col-5</span>
      </g-col>
      <g-col class="item" span="4" offset="4">
        <span>col-4</span>
      </g-col>
    </g-row>
    <pre><code>{{content}}</code></pre>
  </div>
</template>
<style lang="scss" scoped>
$background: #3eaf7c;
$wrapper-top: 10px;
$font-color: white;
* {
  box-sizing: border-box;
}
.offset-wrapper {
  padding-top: $wrapper-top;
  > .row {
    > .item {
      text-align: center;
      color: $font-color;
      > span {
        display: block;
        background: $background;
      }
    }
  }
}
</style>

# 3、响应式

支持 ipad 、narrowPc 、pc 、widePc 四种设备的响应式设置,默认为手机端响应,span 值为 24。 可以通过 :ipad="{span:12, offset:12}" 的形式了来手动设定在具体设备情况下的 offsetspan 属性