初步了解和浏览器支持
使用Grid布局非常简单,你只需要给容器(container)定义:display:grid,并设置列(grid-template-columns)和 行(grid-template-rows)的大小,然后用grid-column和grid-row定义容器子元素(grid-item项目)的位置。与flexbox布局类似,一开始项目的排列顺序并不重要,可以放置在容器的任何位置,这也使得你非常容易通过媒体查询重新排列你的项目。想象一下,当你定义整个页面的布局时,你只需要几行CSS就可以完成页面重排以便适应各种屏幕宽度,这得有多么神奇!
好东西总是来的晚,不要焦躁,不要沮丧。活好每一天,自然就等到了。
浏览器支持度
2018/10/23的caniuse统计:
![89d29bb6c53f2cf3d972e8133b040b8c.png](https://i-blog.csdnimg.cn/blog_migrate/437de9d6d58c369951cba433f950049d.jpeg)
grid支持度
用法
1.网格容器(Grid Container)
元素应用display:grid,它是其所有网格项的父元素。下面例子container就是网格容器。
.container{ display:grid; } 和flex布局相似的是网格布局只对直属子元素有效,也就是只有item是网格项(Grid Item),而sub-item不是。 相关属性 1. display ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181029182957766.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjMwNDA1,size_16,color_FFFFFF,t_70) 当元素设置了网格布局,column、float、clear、vertical-align属性无效。 2. grid-template-columns 和 grid-template-rows 设置行和列的大小,在行轨道或列轨道两边是网格线。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181029183027683.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjMwNDA1,size_16,color_FFFFFF,t_70) .container{ display:grid; grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; } ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181029183202431.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjMwNDA1,size_16,color_FFFFFF,t_70) 你也可以给网格线定义名字,注意名字需要写在[]里面。网格线的命名貌似没有一个严格规定。 .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]; } 用fr单位可以将容器分为几等份,例如下面分成三等份。 .container{ display:grid; grid-template-columns: 1fr 1fr 1fr; } 如果fr单位和实际值一起使用,设置fr的行或列将分(除了实际值)剩余部分。 .container{ display:grid; grid-template-columns: 1fr 50px 1fr 1fr; } 3. grid-template-areas 通过获取网格项中的grid-area属性值(名称),来定义网格模版。重复网格区(grid-area)名称将跨越网格单元格,‘.’代表空网格单元。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20181029183244539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjMwNDA1,size_16,color_FFFFFF,t_70)
1
2
3
4
5
6
.item-1{ grid-area: header; } .item-2{ grid-area: left-side; } .container{ display: grid; color: #fff; text-align: center; height: 150px; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 50px 50px 50px;
grid-template-areas: "header header header"
"left-side . ."
"left-side . ." ;
}
效果:
![2dd119d9291d6d25876f1256983ff641.png](https://i-blog.csdnimg.cn/blog_migrate/7f30437e2c3536799603ec3a202ebbfb.png)
4. grid-column-gap
网格单元间距。
属性值:
line-size: 网格线间距,设置单位值。
.container{
display:grid;
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px;
grid-row-gap: 15px;
}
![4c132ef469b7d1f9dd9d1294d7358f71.png](https://i-blog.csdnimg.cn/blog_migrate/d0e4b9d80868d70d40655fbfd988b6ee.png)
5. justify-items
垂直于列网格线对齐,适用于网格容器里的所有网格项。
![ac330fa3b89e15f33b4378d1163aa4e4.png](https://i-blog.csdnimg.cn/blog_migrate/faace6986fb8ed2b84b5aa7b9ca347c4.png)
居中:
.container{
display:grid;
justify-items: center;
}
![88d54c6df044899a6fb7f245a98fd2ed.png](https://i-blog.csdnimg.cn/blog_migrate/4d01aaf3f48d39573b44d293757da32d.png)
填充:
.container{
display:grid;
justify-items: stretch;
}
![f482dc653015bb9e6484271918dc2e47.png](https://i-blog.csdnimg.cn/blog_migrate/77662e7294b5af7d980a05fa18832cbc.png)
6. align-items
垂直于行网格线对齐,适用于网格容器里的所有网格项。
![bddd7d1c2c35dde3112b182ade6b8835.png](https://i-blog.csdnimg.cn/blog_migrate/56266665a2cb3429b198aec90e44bbca.png)
居中:
.container{
display:grid;
align-items: center;
}
![b4241bec8c2758d80e5bfd75c05c225a.png](https://i-blog.csdnimg.cn/blog_migrate/69a08b7018ec7fcc0e4b2e6eccb9d3a9.png)
填充:
.container{
display:grid;
align-items: stretch;
}
![c21808e1d922999a8914a5235e2a6e36.png](https://i-blog.csdnimg.cn/blog_migrate/82416894c1301d1c74f2dee0b4a4b26a.png)