display:grid 用法

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