📌  相关文章
📜  CSS | grid-area 属性

📅  最后修改于: 2021-09-01 02:50:19             🧑  作者: Mango

grid-area 属性用于在网格布局中设置网格项的大小和位置。 grid-area 属性还用于为网格项设置名称。

句法： 

grid-area: grid-row-start|grid-column-start|grid-row-end|
grid-column-end|itemname;

属性值：

  • grid-row-start：它设置首先显示项目的行。
  • grid-column-start：它设置首先显示项目的列。
  • grid-row-end：它指定停止显示项目的行行，或跨越多少行。
  • grid-column-end：它设置要跨越的列数。
  • itemname：它为网格项设置名称。

示例 1： 




    
        CSS | grid-area Property
    
    

  

    
GeeksforGeeks

    
The grid-area Property

      
    

        
1

        
2

        
3

        
4

        
5

        
6

    


                    

输出：

示例 2： 




    
        CSS grid-area property
    
      
    

  

    
GeeksforGeeks

    
CSS grid-area Property

      
    

        
Heading

        
Margin

        
Subtitle

        
info

    

  

                    

输出：

支持的浏览器： grid-area 属性支持的浏览器如下：

  • 谷歌浏览器 57.0
  • 浏览器 16.0
  • 火狐 52.0
  • Safari 10.0
  • 歌剧 44.0