物化 CSS |网格

有 12 个标准列流体响应式网格系统，可帮助您以有序且简单的方式布局页面。它使用行和列样式类分别定义行和列。 Rows用于指定用于响应列的无填充容器， col用于指定具有子类的列。

有一个容器类用于将页面内容居中。容器类设置为窗口宽度的〜70％。要添加容器，只需将您的内容放在带有容器类的

标签中。这是语法：

现在让我们了解网格系统是如何工作的：

标准网格有 12 列。无论浏览器的大小如何，这些列中的每一列都将始终具有相同的宽度。请记住，在创建布局时，所有列都必须包含在一行中，并且必须将col类添加到内部

以使其成为列。您可以使用 push 和 pull轻松更改列的顺序。只需将push-s2或pull-s2 添加到类中，其中s是屏幕类前缀(s = 小，m = 中，l = 大)，后面的数字是您要推或拉的列数。

例子：

  

    
    
  
    
    
  
    
    

  

    
        GeeksforGeeks
    
      
    
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
    
  
    
        
            
                This div is 7-columns wide on pushed
                to the right by 5-columns.
            
        
  
        
            
                5-columns wide pulled to the left by
                7-columns.
            
        
    
    
    
    

  

网格类：实体化网格系统有四个类：

• .s(用于移动设备)
• .m(平板设备)
• .l(桌面设备)
• .xl(大型桌面设备)

	Mobile devices <= 600px	Tablet devices > 600px	Desktop devices > 992px	Large desktop devices >1200px
Class prefix	.s	.m	.l	.xl
Container width	90%	85%	70%	70%
Number of Columns	12	12	12	12

在前面的示例中，我们仅使用“col s12”定义小屏幕的大小。仅仅说 s12，我们实际上是在说“col s12 m12 l12” 。但是通过明确定义大小，我们可以使我们的网站更具响应性。

  

    
    
  
    
    
  
    
    

  

    
        GeeksforGeeks
    
  
    
    
        
            
                Always full-width (col s12)
            
        
  
        
            
                Full-width on mobile (col s8 m6)
            
        
    
  
    
    
    

  

输出：