网格系统

基本网格

网格将水平空间划分为不可分割的单元，称为“列”。网格中的所有列必须指定其宽度作为总宽度的比例。所有网格系统每行有任意列，Semantic 默认主题有 16 列.默认是one wide。可自己指定每一列站多少wide。当不给网格指定行时，行是“隐式的”，当前面没有更多的空间时，自动转换。

当然也可以指定一个显示的行元素，行是列的水平分组，指定网格的列数。

自动列计数

如果你不知道你要设置几列，可以使用equal width可以自动划分列宽度。

    
  
     
      1
     
  
     
      2
     
  
     
      3
     
  
     
    
      
       4
      
    
      
       5
      
  
     
    

分割

网格可以用分隔符分割，列与列之间有分割(divided)，行与行之间有分割(vertically divided)，单元分割(celled)，内部单元分割(internally celled)。

    
  
     
    
      
      
       
1
    
      
    
      
      
       
2
    
      
  
     
  
     
    
      
      
       
3
    
      
    
      
      
       
4
    
      
    
      
      
       
5
    
      
  
     
    

这样就能使列栏均匀占满网格了。

可堆叠（Stackable）

可自动将行堆叠到移动设备上的列。

    
  
     
    
      
       1
      
    
      
       2
      
    
      
       3
      
  
     
  
     
    
      
       4
      
    
      
       5
      
    
      
       6
      
    
      
       7
      
    
      
       8
      
    
      
       9
      
    
      
       10
      
    
      
       11
      
  
     
    

居中

如果一行没有占满所设置的列数，可以使用centered这个变量来使列居中。

    
  
     
      0
     
  
     
    
      
       1
      
    
      
       2
      
  
     
    

浮动

列可以在每一行的左或者右对齐。left floated, right floated。

拉伸

行可以拉伸内容以占据整个列高度

    
  
     
    
      
      
       
                1      
       
    
      
    
      
      
       
                1      
       
      
       
                2      
       
    
      
    
      
      
       
                1      
       
      
       
                2      
       
      
       
                3      
       
    
      
  
     
    

内边距

padded，vertically padded，horizontally padded。

与React结合

semantic-ui-react

例如：

import { Menu, Item, Container, Image } from 'semantic-ui-react'...export default class MenuExampleInverted extends Component {  state = {}  handleItemClick = (e, { name }) => this.setState({ activeItem: name })  render() {    const { activeItem } = this.state       return (      
            
               
                  
                     
                    
                 
                
                  
       
                      首页            
                   
       
                      新手入门            
                   
       
                      登录            
                   
       
                      注册            
                 
              
           
        )  }}