UNPKG

wecui

Version:

一款基于Vue2.x版本的移动端web组件

93 lines (83 loc) 3.09 kB
@[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> &nbsp;&nbsp;@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> &nbsp;&nbsp;@neat-span-columns 8;<br> } </div> </div>