1.我们经常使用的布局是:
float:left;
display:flex;
2.现在又出现了 grid，它更像是 flex 的升级版 布局上十分强大
display:grid;
3.网格父级元素
网格父级元素 ：display:grid;
grid = 生成块级网格
inline-grid = 生成行内网格
subgrid = 网格容器本身是玩个项（嵌套网格容器），此属性是用来继承其父级网格的列、行大小。
注意：当元素设置了网格布局，column、float、clear、vertical-align的属性是无效的。
网格列宽设置： grid-template-columns 父级
grid-template-columns ：100px 10px 100px 10px 100px ; //竖向排列
表示第一列 设置为 100px;第二列是10px;
(此列可作为列与列之间的间隙) 有几列，每列有多大
网格高度设置：grid-template-rows: 父级
grid-template-rows: auto 10px auto 10px；//横向排列
表示第一行的高度为自适应内容 ，第二行的高度为10px
(此列可以作为列与列之间的间隙) 有几行，每行的高度有多大
(1).例一
.container{
display:grid;
grid-template-columns:40px 50px auto 50px 40px;
grid-template-rows:25% 100px auto;
}
微信截图_20190329113754.png
(2).例二
grid-template-colums、grid-template-rows的属性值：
track-size：轨道大小，可以使用css长度，百分比或用分数（用单位 fr ）
line-name：网格线名字，你可以选择任何名字
.container{
display:grid;
grid-template-columns:[first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows:[row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
微信截图_20190329114345.png
