12 栏栅格

响应式的12栏栅格系统，兼容三种主流屏幕尺寸 1024,1280/1366以及1440。实际上用户屏幕宽度在1024px以上的情况下会自动选择一个最佳的栅格宽度。
如果想关闭响应式布局，只需要删除 sui-responsive.less文件即可。

1. 默认栅格系统

<div class="grid-demo">
  <div class="sui-row">
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
  </div>
  <div class="sui-row">
    <div class="span1">1</div>
    <div class="span2">2</div>
    <div class="span2">2</div>
    <div class="span3">3</div>
  </div>
  <div class="sui-row">
    <div class="span4">4</div>
    <div class="span4">4</div>
  </div>
  <div class="sui-row">
    <div class="span2">2</div>
    <div class="span6">6</div>
  </div>
</div>

默认栅格系统每一栏是定宽的，并且宽度可以根据屏幕宽度在几个固定值之间变化，区别于流式栅格系统的百分比宽度。

下载psd文件
复制代码

代码已复制

2. 流式栅格系统

<div class="grid-demo">
  <div class="sui-row-fluid">
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
  </div>
  <div class="sui-row-fluid">
    <div class="span1">1</div>
    <div class="span2">2</div>
    <div class="span2">2</div>
    <div class="span3">3</div>
  </div>
  <div class="sui-row-fluid">
    <div class="span4">4</div>
    <div class="span4">4</div>
  </div>
  <div class="sui-row-fluid">
    <div class="span2">2</div>
    <div class="span6">6</div>
  </div>
</div>

流式栅格系统每一栏的宽度都是其容器的百分比，因此会随着屏幕宽度的变化而不断变化，没有一个固定的宽度像素值。

下载psd文件
复制代码

代码已复制

开发者文档

1. 默认栅格系统

2. 流式栅格系统