📌  相关文章
📜  Pure.CSS-网格

📅  最后修改于: 2020-10-21 05:53:13             🧑  作者: Mango

Pure.CSS为Pure Grid提供了两种类型的类，即pure-g （一个网格类）和一个单元类pure-u- * 。以下是使用纯网格的规则。

  • 单位宽度以分数为单位。例如，纯u-1-2表示宽度为1/2或50％，纯u-2-5表示宽度为2/5或40％，依此类推。

  • Pure Grid的子级（具有pure-g类的元素）必须使用pure-u或pure-u- *类名。

  • 所有内容都应成为网格单元的一部分，以正确呈现。

网格单位大小

Pure Grid具有第5和第24个单位尺寸。下图显示了一些可用单元的示例，可以将其附加到pure-ui- 。例如，要创建50％宽度的单元格，可以使用css样式pure-ui-1-2 。

第5个基本单位

purecss_5th_based.htm

现场演示
The PURE.CSS Grid
      
      
      
      
   
    
    
    
      
             
         

            
1-5

            

               

                  

               

            

         

         
         

            
2-5

            

               

                  

               

            

         

         
         

            
3-5

            

               

                  

               

            

         

         
         

            
4-5

            

               

                  

               

            

         

         
         

            
1

            

               

                  

               

            

         

         
         

            
1-1

结果

验证结果。

第24个基本单位

purecss_24th_based.htm

现场演示
The PURE.CSS Grid
      
      
      
      
   
    
    
    
      
             
         

            
1-24

            

                  

                  

               

            

         

         
         

            
1-12

            

               

                  

               

            

         

         
         

            
2-24

            

               

                  

               

            

         

         
         

            
3-24

            

               

                  

               

            

         

         
         

            
1-8

            

               

                  

               

            

         

         
         

            
4-24

            

               

                  

               

            

         

         
         

            
1-6

            

               

                  

               

            

         

         
         

            
5-24

            

               

                  

               

            

         

         
         

            
1-4

            

               

                  

               

            

         

         
         

            
6-24

            

               

                  

               

            

         

         
         

            
7-24

            

               

                  

               

            

         

         
         

            
1-3

            

               

                  

               

            

         

         
         

            
22-24

            

               

                  

               

            

         

         
         

            
23-24

            

               

                  

               

            

         

         
         

            
1

            

               

                  

               

            

         

         
         

            
1-1

            

               

                  

               

            

         

         
         

            
24-24

结果

验证结果。