KISSY Grids Demo

# 自适应栅格 基于百分比的列宽

## 自适应列

2
2
2
2
2
2
2
2
2
2
2
2
8
8
8
8
16
12
12
24

### 自适应的行

通过简单的修改 `.row` 为 `.row-fluid` 可以定义自适应行。 而列定义完全保持和原来相同，简单快速的在定宽和自适应间切换。

### 代码

    <div class="row-fluid">
      <div class="span8">...</div>
      <div class="span16">...</div>
    </div>

## 自适应嵌套

在自适应列的嵌套中，子列的数值之和不一定等于父列，而是按照百分比计算的宽度。

Fluid 24
Fluid 6
Fluid 12

    <div class="row-fluid">
      <div class="span24">
        Level 1 of column
        <div class="row-fluid">
          <div class="span6">Level 2</div>
          <div class="span12">Level 2</div>
        </div>
      </div>
    </div>