semantic-ui网格布局详解

网格布局是一种比较早的概念了。semantic的网格布局和其他css框架的也是类似的，使用方法有点区别。

一、概念

网格：是一种网页的设计结构，将网页的空间分割为一个个小格子的空间，从而满足网页布局的需求。可以理解为一个表格。
网格的声明方式为 class=“ui grid”

<div class="ui grid">

</div>

列：将横向的空间分割为一个或多个独立的单元格。可以理解为表格的竖列。
semantic默认主题使用的列宽度总数为16个。网格中列的默认宽度为1。列的宽度可以使用几个wide来表示。如占用4个宽度则为 four wide。
八个宽度eight wide。列宽的总数加起来必须是16，才能横向填满整个空间。当总数超过16，则另起一行。
列的声明方式为 class=“column”，指定宽度用 wide表示。
如下代码指定了列的宽度：

<div class="ui grid">
  <div class="four wide column">4个宽度</div>
  <div class="four wide column">4个宽度</div>
  <div class="four wide column">4个宽度</div>
  <div class="four wide column">4个宽度</div><!--4个4为16，后面的另起一行-->
  <div class="eight wide column">8个宽度</div>
  <div class="eight wide column">8个宽度</div><!--2个8为16，后面的另起一行-->
  <div class="ten wide column">10个宽度</div> <!--1个10，占用10/16-->
</div>

结果为：

使用默认宽度代码：

<div class="ui grid">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
  <div class="column">6</div>
  <div class="column">7</div>
  <div class="column">8</div>
  <div class="column">9</div>
  <div class="column">10</div>
  <div class="column">11</div>
  <div class="column">12</div>
  <div class="column">13</div>
  <div class="column">14</div>
  <div class="column">15</div>
  <div class="column">16</div><!--到达16个宽度。另起一行-->
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

显示效果为：

行：是横向的一组列。可以理解为表格中的行，一行可以有一个或多个列。
行的声明方式为 class=“row”。
如下代码 four column指定了列的宽度，表示这个网格中有4个列，即每个列占用4个宽度，总共16。此时内部又使用row对column进行了分组。
虽然分组了，但是并没有改变column的宽度。宽度已经在定义网格时指定。

<div class="ui four column grid">
  <div class="row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

结果为：

也可以在行上直接定义列的数量，等价于定义了列的宽度。此时列的数量需放在row上。
如指定一行有三列，一行有两列：

<div class="ui grid">
  <div class="three column row">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  </div>
  <div class="two column row">
  <div class="column">4</div>
  <div class="column">5</div>
  </div>
</div>

显示结果为：

semantic中网格的使用非常灵活，网格默认填充到最大空间，行填充到网格的宽度，列默认自动流动布局，超出后另起一行。网格也可以互相嵌套。

二、定义网格布局的背景色

当使用样式class=“ui padded grid”，即padded grid网格时即可指定网格的背景色，可以将背景色设置在行或者列上。
如下代码：

<div class="ui padded grid">
  <div class="three column row">
  <div class="red column">1</div><!--背景色在列-->
  <div class="green column">2</div><!--背景色在列-->
  <div class="olive column">3</div><!--背景色在列-->
  </div>
  <div class="two column row">
  <div class="black column">4</div><!--背景色在列-->
  <div class="yellow column">5</div><!--背景色在列-->
  </div>
  <div class="one column row pink"><!--背景色在行-->
    <div class="column">6</div>
  </div>
  <div class="row" style="background-color: #869D05;color: #FFFFFF;"><!--背景色在行-->
    <div class="column">7</div>
  </div>
</div>

显示效果：