css3网格布局（CSS 网格(Grid)布局）

CSS Grid 布局是一种二维布局方式
    
    
    
    
，可以将页面分成行和列     


     


     


     


   ，并在其中放置元素
    
    
    
    
。使用 Grid 布局时 




 




 




 




 

，需要定义网格容器和网格项目     


     


     


     


   。

第一步

   

   

   

   

，在网格容器元素（通常是一个 div）上设置 display: grid; 来启用 Grid 布局 




 




 




 




 

。

第二步     

     

     

     

  ，使用 grid-template-columns 和 grid-template-rows 属性定义网格的行和列

   

   

   

   

。例如  




  




  




  




  
，如果你想要创建一个 3x3 的网格


  


  


  


  


，可以使用：

grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);

第三步     
     
     
     
 ，在网格容器内放置网格项目元素     

     

     

     

  。使用 grid-column 和 grid-row 属性来定位网格项目  




  




  




  




  
。例如   




   




   




   




   ，如果你想要将一个元素放在第一行第二列



 



 



 



 



，可以使用：

grid-column: 2 / 3; grid-row: 1 / 2;

还有其他一些属性可以帮助你更好地控制网格布局                    ，例如 grid-gap （在网格中添加间距）    
    
    
    
   、justify-content（水平对齐） 


     


     


     


     

、align-content（垂直对齐） 等


  


  


  


  


。

除了上述的属性外    




    




    




    




    ，还有一些其他的属性可以帮助你更好地控制网格布局























，这些属性包括：

grid-template-areas: 指定网格的名称和网格项目的布局     
     
     
     
 。 grid-area: 指定网格项目所在的网格区域   




   




   




   




   。 grid-column-start, grid-column-end, grid-row-start, grid-row-end: 分别指定网格项目在网格中的起始和结束位置



 



 



 



 



。 grid-auto-columns, grid-auto-rows: 指定网格中除了已定义行和列以外自动生成的行和列的大小                    。 grid-auto-flow: 指定网格中空白区域如何填充网格项目    




    




    




    




    。

使用 CSS Grid布局还有很多可能性                    ，并且结合Flexbox 布局可以更好地控制元素的定位























。

需要注意的是     



     



     



     



    ，这些属性需要在网格容器上使用






















，而不是网格项目上使用                    。此外
    
    
    
    
，CSS Grid 布局是一个相对新的技术     


     


     


     


   ，并不是所有浏览器都支持     



     



     



     



    。因此 




 




 




 




 

，在使用前应检查浏览器兼容性






















。