@[toc] # Grid > 提供了流体网格快捷声明功能。利用它我们可以快速地构件我们的网格系统和实现常用的布局模式。Plugin documentation ## 基础用法通过简单的at-rule语法声明，我们可以快速得实现基于百分比的流体布局方式。

@neat-outer-container;

@neat-span-columns 6;

*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; 来移除右侧的间距。

@neat-outer-container;

@neat-span-columns 4;

@neat-span-columns 8;
@neat-omega;

@neat-span-columns 5;

@neat-span-columns 7;
@neat-omega;

@neat-span-columns 6

@neat-span-columns 6;

## 嵌套网格

@neat-outer-container;

@neat-span-columns 4;

@neat-span-columns 8;
@neat-omega;

@neat-span-columns 6;

## table式的网格 table式网格中，每一列之间是没有间隔的。

@neat-row table;

@neat-span-columns 6 table;

## 媒体查询

@neat-outer-container;

@neat-span-columns 6;
@media (max-width: 800px) {
@neat-span-columns 4;
}

@neat-span-columns 6;
@media (max-width: 800px) {
@neat-span-columns 8;
}