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 布局是一个相对新的技术     


     


     


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



     



     



     

。因此 




 




 




 




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



















。