Semantic UI 之 网格 grid

Semantic UI 在宽度上将网页分成16份 本博客对应的代码：Semantic UI示例代码

准备工作 本博客网页的代码框架为：

    
        
        信息
        
        
        
    
    

		

    

本博客下面示例中每个折叠隐藏部分的代码为：

    
        17
        COLUMN
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet atque consequatur hic illo labore odio, perspiciatis voluptas. Animi aut doloribus molestiae nam optio similique? Alias aperiam enim reiciendis sed velit.
    

网格系统

代码： 效果：

手工指定网格的列数

代码：

效果：

单独指定每栏占的宽度

代码：

效果：

手工指定行

代码： 效果：

分隔线 column分隔线

代码： 效果：

row分隔线

代码： 效果：

vertical 分隔线

代码： 效果：

celled分隔线

代码： 效果：

internally celled分隔线

代码： 效果：

等分宽度的网格

代码：

效果：

Doubling与Stackable

推荐使用doubling让列的宽度在小尺寸的屏幕上变为原来的2倍显示，使用stackable让列在手机上堆叠显示，通过computer/mobile/tablet来指定在不同的设备止显示不同的内容

doubling

代码： 效果：

stackable

代码： 效果：

设置不同列在不同屏幕上的可见性

代码： 效果：

指定列在不同的屏幕上显示不同的宽度

代码：

    
    
        
            8
            COLUMN
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet atque consequatur hic illo labore odio, perspiciatis voluptas. Animi aut doloribus molestiae nam optio similique? Alias aperiam enim reiciendis sed velit.
        
    

效果：

对齐

代码： 效果：

拉伸

代码：

    
        
            
                1
                COLUMN
                nam optio similique? Alias aperiam enim reiciendis sed velit.
            
        
    
    
        
            2
            COLUMN
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet atque consequatur hic illo labore odio, perspiciatis voluptas. Animi aut doloribus molestiae nam optio similique? Alias aperiam enim reiciendis sed velit.
        
    
    
        
            
                3
                COLUMN
                nam optio similique? Alias aperiam enim reiciendis sed velit.
            
        
    

效果：

间隔 默认

代码：

效果：

默认间距

代码：

效果：

垂直间距

代码：

效果：

水平间距

代码：

效果：

Column间的间距

代码：

效果：