栅格布局容器

通过基础的 24 分栏，迅速简便地创建布局。

如何使用

引入

import 'blitz-ui-demo/dist/index.css'
import { Row } from 'blitz-ui-demo'
import { Col } from 'blitz-ui-demo'

export default {
    components:{
        'bl-row':Row,
        'bl-col':Col
    }
}

---

基础布局

span="24"

span="12"

span="12"

span="8"

span="8"

span="8"

span="6"

span="6"

span="6"

span="6"

span="4"

span="4"

span="4"

span="4"

span="4"

span="4"

最基础的根据span来决定栅格大小的布局形式

<div class="grid-wrapper">
  <bl-row class="row">
    <bl-col class="item" span="24">span="24"</bl-col>
  </bl-row>
  <bl-row class="row">
    <bl-col class="item" span="12">span="12"</bl-col>
    <bl-col class="item" span="12">span="12"</bl-col>
  </bl-row>
  <bl-row class="row">
    <bl-col class="item" span="8">span="8"</bl-col>
    <bl-col class="item" span="8">span="8"</bl-col>
    <bl-col class="item" span="8">span="8"</bl-col>
  </bl-row>
  <bl-row class="row">
    <bl-col class="item" span="6">span="6"</bl-col>
    <bl-col class="item" span="6">span="6"</bl-col>
    <bl-col class="item" span="6">span="6"</bl-col>
    <bl-col class="item" span="6">span="6"</bl-col>
  </bl-row>
    <bl-row class="row">
    <bl-col class="item" span="4">span="4"</bl-col>
    <bl-col class="item" span="4">span="4"</bl-col>
    <bl-col class="item" span="4">span="4"</bl-col>
    <bl-col class="item" span="4">span="4"</bl-col>
    <bl-col class="item" span="4">span="4"</bl-col>
    <bl-col class="item" span="4">span="4"</bl-col>
  </bl-row>
</div>
<style lang="scss" scoped>
* {box-sizing: border-box;}
.grid-wrapper {
  > .row {margin-bottom: 20px;padding: 5px 0;
    > .item {line-height: 3;text-align: center;
       &:nth-child(odd) {background: #409eff;color: white;}
      &:nth-child(even) {background: #c6e2ff;color: #303133;}
    }
  }
}
</style>
      

---

分栏间隔布局

gutter="30"

gutter="30"

gutter="20"

gutter="20"

gutter="20"

gutter="10"

gutter="10"

gutter="10"

gutter="10""

使用gutter属性来决定栅格间隔的布局形式

<div class="grid-wrapper">
  <bl-row class="row" :gutter="30">
    <bl-col class="item" span="12"><span>gutter="30"</span></bl-col>
    <bl-col class="item" span="12"><span>gutter="30"</span></bl-col>
  </bl-row>
  <bl-row class="row" :gutter="20">
     <bl-col class="item" span="8"><span>gutter="20"</span></bl-col>
     <bl-col class="item" span="8"><span>gutter="20"</span></bl-col>
     <bl-col class="item" span="8"><span>gutter="20"</span></bl-col>
  </bl-row>
    <bl-row class="row" :gutter="10">
    <bl-col class="item" span="6"><span>gutter="10"</span></bl-col>
    <bl-col class="item" span="6"><span>gutter="10"</span></bl-col>
    <bl-col class="item" span="6"><span>gutter="10"</span></bl-col>
    <bl-col class="item" span="6"><span>gutter="10"</span>"</bl-col>
  </bl-row>
</div>

<style lang="scss" scoped>
* {box-sizing: border-box;}
.grid-wrapper {
  > .row {margin-bottom: 20px;padding: 5px 0;
    > .item {line-height: 3; text-align: center;
      &:nth-child(odd) {
        > span { display: block; background: #409eff; color: white;}
      }
 &:nth-child(even) {
        > span { display: block; background: #c6e2ff;color: #303133; }
      }
    }
  }
}
</style>
      

---

对齐方式布局

align="left"

align="left"

align="center"

align="center"

align="right"

align="right"

根据align来决定栅格聚集位置的布局形式

<div class="grid-wrapper">
  <bl-row class="row" align="left">
    <bl-col class="item" span="8">align="left"</bl-col>
    <bl-col class="item" span="8">align="left"</bl-col>
  </bl-row>
  <bl-row class="row" align="center">
    <bl-col class="item" span="8">align="center"</bl-col>
    <bl-col class="item" span="8">align="center"</bl-col>
  </bl-row>
  <bl-row class="row" align="right">
    <bl-col class="item" span="8">align="right"</bl-col>
    <bl-col class="item" span="8">align="right"</bl-col>
  </bl-row>
</div>
<style lang="scss" scoped>
* {box-sizing: border-box;}
.grid-wrapper {
  > .row {margin-bottom: 20px;padding: 5px 0;
    > .item {line-height: 3;text-align: center;
       &:nth-child(odd) {background: #409eff;color: white;}
      &:nth-child(even) {background: #c6e2ff;color: #303133;}
    }
  }
}
</style>
      

---

分栏偏移布局

offset="0"

offset="3"

offset="4"

offset="3"

offset="2"

offset="1"

根据offset来决定栅格向右偏移的布局形式

<div class="grid-wrapper">
  <bl-row class="row">
    <bl-col class="item" span="8">offset="0"</bl-col>
    <bl-col class="item" span="5" offset="3">offset="3"</bl-col>
    <bl-col class="item" span="4" offset="4">offset="4"</bl-col>
  </bl-row>
  <bl-row class="row">
    <bl-col class="item" span="5" offset="3">offset="3"</bl-col>
    <bl-col class="item" span="6" offset="2">offset="2"</bl-col>
    <bl-col class="item" span="7" offset="1">offset="1"</bl-col>
  </bl-row>
</div>
<style lang="scss" scoped>
* {box-sizing: border-box;}
.grid-wrapper {
  > .row {margin-bottom: 20px;padding: 5px 0;
    > .item {line-height: 3;text-align: center;
       &:nth-child(odd) {background: #409eff;color: white;}
      &:nth-child(even) {background: #c6e2ff;color: #303133;}
    }
  }
}
</style>
      

---

响应式布局

预设了四个响应尺寸：pad、smallDevice、middleDevice、和bigDevice。

<div class="grid-wrapper">
  <bl-row class="row">
     <bl-col class="item"
                   span="24"
                   :pad="{span:10}"
                   :smallDevice="{span:8}"
                   :middleDevice="{span:4}"
                   :bigDevice="{span:2}">
     </bl-col>
     <bl-col class="item"
                   span="24"
                   :pad="{span:14}"
                   :smallDevice="{span:16}"
                   :middleDevice="{span: 18,offset:2}"
                   :bigDevice="{span:22}">
    </bl-col>
  </bl-row>
</div>
<style lang="scss" scoped>
* {box-sizing: border-box;}
.grid-wrapper {
  > .row {margin-bottom: 20px;padding: 5px 0;
    > .item {line-height: 3;text-align: center;
       &:nth-child(odd) {background: #409eff;color: white;}
      &:nth-child(even) {background: #c6e2ff;color: #303133;}
    }
  }
}
</style>
      

---

Row Attributes

参数	说明	类型	可选值	默认值
gutter	栅格间隔	String/Number	1-24之间的数字	0
align	输入框占位文本	String	'left'、'center'、'right'	'left'

---

Col Attributes

参数	说明	类型	可选值	默认值
span	栅格占据的列数	String/Number	1-24之间的数字	24
offset	栅格左侧的间隔格数	String/Number	1-24之间的数字	0
pad	≥577px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 18, offset: 4})	—	—
smallDevice	≥769px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 18, offset: 4})	—	—
middleDevice	≥993px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 18, offset: 4})	—	—
bigDevice	≥1201px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 18, offset: 4})	—	—