grid布局、css3计算属性、多媒体查询

容器和项目（容器的直接子元素）

语法：display: grid ; //与flex同理

属性

1、容器属性

grid-template-colums: auto / 10px(第一列) 200px(第二列) / repeat(4(列数),10px(每列的宽度)像素或百分数)
grid-template-rows: auto / repeat(3(三行),200px(行的高度)) / minmax(100px(最小) , 1fr(最大)) fr：一个平分单位，由浏览器的宽度决定计算
colum-gap：列与列之间的距离
row-gap：行间距
gap：同时设置行间距，列间距
grid-template-areas: 容器命名；//"."表示不命名
grid-auto-flow: 设置先行后列的放置方向（colum 按照先列后行的排列， row 默认先行后列，dense紧密排列）
justify-items: 控制项目在单元格的水平对齐方式（stretch 默认撑满单元格，center