wecui
Version:
一款基于Vue2.x版本的移动端web组件
93 lines (83 loc) • 3.09 kB
Markdown
@[toc]
# Grid
> 提供了流体网格快捷声明功能。利用它我们可以快速地构件我们的网格系统和实现常用的布局模式。<a class="link-ul" href="https://github.com/jo-asakura/postcss-neat">Plugin documentation</a>
## 基础用法
通过简单的at-rule语法声明,我们可以快速得实现基于百分比的流体布局方式。
<div class="box grid-row-fluid">
<div class="box-text">@neat-outer-container;</div>
<div class="box-col grid-col-6">@neat-span-columns 6;</div>
<div class="box-col grid-col-6">@neat-span-columns 6;</div>
</div>
*input:*
```css
.grid-row-fluid {
@neat-outer-container;
}
.grid-col-6 {
@neat-span-columns 6;
}
```
*output:*
```
.grid-row-fluid{
max-width:64em;
margin-left:auto;
margin-right:auto;
*zoom:1;
}
.grid-row-fluid:before, .grid-row-fluid:after{ content:" "; display:table; }
.grid-row-fluid:after{ clear:both; }
.grid-col-6{
display:block;
float:left;
margin-right:2.35765160%;
width:48.82117420%;
}
.grid-col-6:last-child{ margin-right:0; }
```
## 多行网格
在每一列中,我们可以使用 @neat-omega; 来声明该列是当前行的最后一列。但要注意的是,在没有带值的情况下,其只是简单地给该列设置 margin-right: 0; 来移除右侧的间距。
<div class="box grid-row-fluid">
<div class="box-text">@neat-outer-container;</div>
<div class="box-col grid-col-4">@neat-span-columns 4;</div>
<div class="box-col grid-col-8 grid-col-omega">@neat-span-columns 8;<br>@neat-omega;</div>
<div class="box-col grid-col-5">@neat-span-columns 5;</div>
<div class="box-col grid-col-7 grid-col-omega">@neat-span-columns 7;<br>@neat-omega;</div>
<div class="box-col grid-col-6">@neat-span-columns 6</div>
<div class="box-col grid-col-6">@neat-span-columns 6;</div>
</div>
## 嵌套网格
<div class="box grid-row-fluid">
<div class="box-text">@neat-outer-container;</div>
<div class="box-col grid-col-4">@neat-span-columns 4;</div>
<div class="box-col grid-col-8 grid-col-omega">
<div class="box-text">@neat-span-columns 8;<br>@neat-omega;</div>
<div class="box-col grid-col-6">@neat-span-columns 6;</div>
<div class="box-col grid-col-6">@neat-span-columns 6;</div>
</div>
</div>
## table式的网格
table式网格中,每一列之间是没有间隔的。
<div class="box">
<div class="box-text">@neat-row table;</div>
<div class="grid-row-table">
<div class="box-col grid-col-6-table" style="border-right: 1px solid #fff;">@neat-span-columns 6 table;</div>
<div class="box-col grid-col-6-table">@neat-span-columns 6 table;</div>
</div>
</div>
## 媒体查询
<div class="box grid-row-fluid">
<div class="box-text">@neat-outer-container;</div>
<div class="box-col grid-col-6 grid-col-media-4">
@neat-span-columns 6;<br>
@media (max-width: 800px) {<br>
@neat-span-columns 4;<br>
}
</div>
<div class="box-col grid-col-6 grid-col-media-8">
@neat-span-columns 6;<br>
@media (max-width: 800px) {<br>
@neat-span-columns 8;<br>
}
</div>
</div>