25-网格布局

网格布局的使用

把页面划分为很多的网格可以设置子级元素的位置

一、形成网格布局的属性

1. 属性：display
2. 属性值：grid

二、设置网格中的行和列

1. 属性

   grid-template-columns 网格项目列的大小 宽度

   grid-template-rows 网格项目行的大小 高度

2. 属性值：需要几行几列就需要设置几个属性值

   /* 三行三列 */
   grid-template-columns:100px 100px 100px
   grid-template-rows:100px 100px 100px
   

3. 网格中新增了一种单位：fr（fraction 自适应单位 需要设置占比）

三、划分网格布局的区域

1. 在父级元素上添加：grid-template-areas
2. 在子级元素上添加：grid-area
3. 网格间距：grid-gap

案例：百度风云榜布局