网格

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

基础用法: 间隔20px分成三份, 当为ipad屏幕宽度以上时候>=577，每个栅格分成6,12,6份 当为中等屏幕宽度以上时候>=769，每个栅格8份

间隔20px分成三份

间隔20px分成三份

间隔20px分成三份

<w-row align="center" :gutter="20">
    <w-col span="24" :narrow-pc="{span:8}" :ipad="{span:6}">
        <div class="rowbox">间隔20px分成三等份</div>
    </w-col>
    <w-col span="24" :narrow-pc="{span:8}" :ipad="{span:12}">
        <div class="rowbox">间隔20px分成三等份</div>
    </w-col>
    <w-col span="24" :narrow-pc="{span:8}" :ipad="{span:6}">
        <div class="rowbox">间隔20px分成三等份</div>
    </w-col>
</w-row>
<style lang="scss">
.rowbox{
    border: 1px solid #ddd;
    min-height: 50px;
    background: #666;
    color: #fff;
}
</style>

Row Attributes

参数	说明	类型	可选	默认
gutter	栅格间隔	number,string	—	—
align	flex 布局下的垂直排列方式	string	left / right / center	—

Col Attributes

参数	说明	类型	可选	默认
span	栅格占据的列数	number	—	—
offset	栅格左侧的间隔格数	number	—	—
phone	默认安装手机模式	object (例如: {span:4, offset:4})	—	—
ipad	>=577px响应式栅格数	object (例如: {span:4, offset:4})	—	—
narrowPc	>=769px 响应式栅格数	object (例如: {span:4, offset:4})	—	—
pc	>=993px 响应式栅格数	object (例如: {span:4, offset:4})	—	—
widePc	>=1201px 响应式栅格数	object (例如: {span:4, offset:4})	—	—