wecui/packages/wecui-css/node_modules/postcss-salad/docs/src/pages/grid.md

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

@[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>