grid布局是二维，flex布局是一维

容器属性

display属性

在元素上声明 display:grid或者display:inline-grid来创建网格容器

grid-template-columns grid-template-rows

grid-template-columns 设置列宽
grid-template-rows 设置行宽

• 数字
• repeat(times，width)函数
• auto-fill关键字
• fr关键字
• minmax(min,max)函数
• auto关键字

 .wrapper{
        display:grid;
        grid-template-columns:200px 200px 200px;  //数字
        
        grid-template-columns: repeat(3,200px);   //repeat()函数，可简化重复值
        
        grid-template-columns:repeat(auto-fill,200px);  // auto-fill自动填充，表示列宽是200px，宽度固定的情况下尽可能容纳多的单元格
        
        grid-template-columns:200px 1fr 3fr;  //fr单位表示网格容器可用的一等分，表示第一列200px，后面的宽度分为两等份分别占1/4、3/4;
        
        grid-template-columns:1fr 1fr minmax(300px,2fr);  //minmax表示一个长度范围
        
        grid-template-columns:200px auto 200px;  //第一列维200px第二列由浏览器决定
        
        grid-template-columns:repeat(auto-fill,minmax(200px,1fr))  //列宽至少200px 如果还有空余会平分
        
        grid-gap:20px;
        grid-template-rows:200px 200px;
        grid-auto-flow: row dense;  // 尽可能填充不留空白
    }

grid-row-gap grid-column-gapgrid-gap 间距

grid-auto-flow

控制自动布局怎么排列 默认顺序是先行后列，默认值是row

dense关键字 尽可能填满

grid-auto-columns grid-auto-rows

 设置多余的网格，如果不设置浏览器会根据单元格内容的大小决定新增网格的列宽行高

justify-items align-items place-items

justify-items 设置水平位置
algin-items 设置垂直位置
place-items  justifu-items和align-items的简写形式

    .container{
        justify-items:start|center|stretch;
        align-items:start|center|stretch;
    }

justify-content align-content place-content

 justify-content 整个内容区域在容器水平位置
 align-content 整个内容区域在容器垂直位置
 place-content justify-content align-content 简写形式

    .container{
        justify-content:start|center|stretch|space-around|space-between|space-evenly;
        align-content:start|center|stretch|space-around|space-between|space-evenly;
    }

grid-template-areas grid-area

grid-template-areas 定义区域，一个区域由一个或者多个单元格组成
grid-area 指定项目放在哪个区域

项目属性

grid-columns-start grid-columns-end grid-row-start grid-row-end

 指定网格项目所在的四个边框分别定位在哪个网格线，从而指定项目位置
 
 grid-columns-start：span 3;  表示这个网格项目跨度为3

justify-self align-self place-self

 justifu-self 设置单元格水平位置
 align-self   设置单元格垂直位置
 place-self   justifu-self和align-self的简写形式
 

grid-area

指定项目放在哪个区域