Grid 栅格

栅格组件参数传入对象时为响应式参数，如 :span="{ sm: 6, md: 12 }"

基础用法

<template>
  <plv-row>
    <plv-col :span="24">
      <div class="grid-col grid-col--dark">24</div>
    </plv-col>
    <plv-col :span="12">
      <div class="grid-col grid-col--normal">12</div>
    </plv-col>
    <plv-col :span="12">
      <div class="grid-col grid-col--light">12</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--normal">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--dark">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--normal">6</div>
    </plv-col>
    <plv-col :span="10">
      <div class="grid-col grid-col--dark">10</div>
    </plv-col>
    <plv-col :span="14">
      <div class="grid-col grid-col--normal">14</div>
    </plv-col>
  </plv-row>
</template>

显示代码

流式布局

<template>
  <div>
    <plv-row :gutter="20" type="flex" justify="space-around" style="margin-bottom: 20px;">
      <plv-col :span="3">
        <div class="grid-col grid-col--dark">3</div>
      </plv-col>
      <plv-col :span="3">
        <div class="grid-col grid-col--dark">3</div>
      </plv-col>
      <plv-col :span="3">
        <div class="grid-col grid-col--dark">3</div>
      </plv-col>
    </plv-row>

    <plv-row  :gutter="20" type="flex" justify="center">
      <plv-col :span="3">
        <div class="grid-col grid-col--normal">3</div>
      </plv-col>
      <plv-col :span="3">
        <div class="grid-col grid-col--normal">3</div>
      </plv-col>
      <plv-col :span="3">
        <div class="grid-col grid-col--normal">3</div>
      </plv-col>
    </plv-row>
  </div>
</template>

显示代码

间隔

<template>
  <plv-row :gutter="20">
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
  </plv-row>
</template>

显示代码

间隔传入数组

<template>
  <plv-row :gutter="[20, 30]">
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
    <plv-col :span="6">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
  </plv-row>
</template>

显示代码

列偏移

<template>
  <div>
    <plv-row :gutter="20">
      <plv-col :span="6">
        <div class="grid-col grid-col--dark">6</div>
      </plv-col>
      <plv-col :span="6" :offset="6">
        <div class="grid-col grid-col--dark">6</div>
      </plv-col>
    </plv-row>

    <plv-row :gutter="20">
      <plv-col :span="6" :offset="6">
        <div class="grid-col grid-col--dark">6</div>
      </plv-col>
      <plv-col :span="6" :offset="6">
        <div class="grid-col grid-col--dark">6</div>
      </plv-col>
    </plv-row>
  </div>
</template>

显示代码

列排序

<template>
  <plv-row>
    <plv-col :span="18" :push="6">
      <div class="grid-col grid-col--normal">18</div>
    </plv-col>
    <plv-col :span="6" :pull="18">
      <div class="grid-col grid-col--light">6</div>
    </plv-col>
  </plv-row>
</template>

显示代码

Row Attributes

参数	说明	类型	可选值	默认值
col	一行的列数	Number	-	24
gutter	栅格的间隔，传入数组时，为水平与垂直方向的距离	Number Object Array	-	0
type	类型，是否为流式布局，只支持主流浏览器	String	flex	-
justify	流式布局下水平布局	String	star/center/end/space-around/space-between	-
align	流式布局下垂直布局	String	top/middle/bottom	-
tag	行标签	String	-	div

Col Attributes

参数	说明	类型	可选值	默认值
span	栅格占位格数	Number Object	-	24
offset	栅格左侧的间隔格数	Number Object	-	0
flex	flex 布局填充	String Number	-	-
order	栅格顺序，flex 布局下有效	Number	-	0
pull	栅格向左移动格数	Number Object	-	0
push	栅格向右移动格数	Number Object	-	0
tag	栅格标签	String	-	div