网格

响应式网格

1

2

3

4

5

6

<g-row style="background-color: #eee">
  <g-col
    v-for="item in 6" :key="item"
    span="24" :pad="{span: 12}" :narrow-pc="{span: 8}" :pc="{span: 6}" :wide-pc="{span: 4}"
  >
    <div style="border: 1px solid #ccc; height: 50px; text-align: center; line-height: 50px">{{ item }}</div>
  </g-col>
</g-row>

设置偏移（offset）

1

2

3

<g-row style="background-color: #eee">
  <g-col span="24" :pad="{span: 12}" :narrow-pc="{span: 4}">
    <div style="border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">1</div>
  </g-col>
  <g-col span="24" :pad="{span: 12}" :narrow-pc="{span: 8, offset: 4}">
    <div style="border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">2</div>
  </g-col>
  <g-col span="24" :pad="{span: 12}" :narrow-pc="{span: 4, offset: 4}">
    <div style="border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">3</div>
  </g-col>
</g-row>

设置居中（align）

1

2

<g-row align="center" style="background-color: #eee">
  <g-col style="width: 100px; border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">1</g-col>
  <g-col style="width: 100px; border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">2</g-col>
</g-row>

设置间隙（gutter）

1

2

<g-row :gutter="20" style="background-color: #eee">
  <g-col :span="2" :pc="{span: 6}" :wide-pc="{span: 8}">
    <div style="border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">1</div>
  </g-col>
  <g-col :span="20" :pc="{span: 12}" :wide-pc="{span: 8}">
    <div style="border: 1px solid #aaa; height: 50px; text-align: center; line-height: 50px">2</div>
  </g-col>
</g-row>