KISSY Grids Demo

# 栅格 24列栅格系统

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
2
2
2
2
4
4
4
4
4
4
8
8
8
8
16
12
12
24

默认的24列、1190px宽度的栅格系统。

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

页面被我们分割成24个基础列，你通过指定横跨多少列来控制每个区域的宽度。

## 带有偏移量的列

8
8 offset 8
6 offset 6
6 offset 6
16 offset 8

    <div class="row">
      <div class="span8">...</div>
      <div class="span8 offset8">...</div>
    </div>

## 嵌套列

有时我们需要在某一列中嵌套一个栅格，只需要在 `.span*` 中增加一个 `.row` ， 并在 `.row` 中增加若干 `.span*` 。

### 样例

嵌套行中的列横跨宽度相加必须等于其外部列的宽度。 例如：一个 `.span12` 列中可以有两个 `.span6` 列。

Level 1 of column
Level 2
Level 2

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