semantic-ui网格布局详解

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

一、概念

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

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

  
4个宽度
  
4个宽度
  
4个宽度
  
4个宽度

  
8个宽度
  
8个宽度

  
10个宽度
 

结果为：

使用默认宽度代码：

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16

  
1
  
2
  
3
  
4

显示效果为：

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

结果为：

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

  

  
1
  
2
  
3
  
  

  
4
  
5
  

显示结果为：

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

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

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

  

  
1

  
2

  
3

  
  

  
4

  
5

  
  

    
6
  
  

    
7
  

显示效果：