# 网格 - 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}"
的形式了来手动设定在具体设备情况下的 offset
和 span
属性