单体操作，控制个体的位置，凌驾于整体规则，4个属性分别是 grid-row-start（开始行线）， grid-column-start（开始列线）， grid-row-end（结束行线），grid-column-end（结束列线）
比如下面用item3来单独操作
.grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; grid-template-columns: 30px 20px repeat(2,1fr); grid-gap: 2px 4px; } .grid_item { background: #0490db; border: 1px solid #fff; } #item3{ grid-area: 1 /1/ 2/ 4; }grid-area: 1 /1/ 2/ 4;代表item3的位置是，行线1到2，列线1到4，这四条线组成的区域即是item3的位置，是不是很强大，太叼了这个
你可能会问如果中间有很多列/行，那还要去数是第几列线岂不是很麻烦，因此又有了优化
和js里的slice类似，负数表示倒数
而span表示合并
因此本例中，以下都是等价的
#item3{ grid-area: 1 /1/ 2/ 4; grid-area: 1 /1/ 2/ span 3;//等价 grid-area: 1 /1/ 2/ -2;//等价 } order如果有两个子项目发生了重叠怎么办呢，就需要order来解决层级问题了。
和index类似于z-index，表明叠放顺序，数值越大，越在上。允许负数。
.grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; grid-template-columns: 30px 20px repeat(2,1fr); grid-gap: 2px 4px; } .grid_item { background: #0490db; border: 1px solid #fff; } #item3{ grid-area: 1 /1/ 2/ 4; order: 1; } #item4{ grid-area: 1 /1/ 2/ 4; }因为item3有order,所以item3盖住了item4
命名在我看来，命名是grid最强大的地方，你可以在容器里面设置命名，然后在子项目里面使用该命名
其中点号 . 代表一个空网格单元
比如我们来个常规的布局
<div> <div>header</div> <div>aside</div> <div>content</div> <div>footer</div> </div> <span>邻居元素</span> .grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; grid-template-columns: 30px 20px repeat(2,1fr); grid-gap: 2px 4px; grid-template-areas: "header header header header" "aside . content content" "footer footer footer footer"; } .grid_item { background: #0490db; border: 1px solid #fff; } #header{ grid-area: header; } #aside{ grid-area: aside; } #content{ grid-area: content; } #footer{ grid-area: footer; }是不是很强大
另外，网络线也是可以命名的
测试以上就是一些常用的，基础的使用方法，更深入的我们以后再来讨论
如果你想检测自己是否基本掌握了grid，可以使用以下的网址测试，是个有趣的小游戏
小测试
最后大家好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客，希望和大家多多交流，一起成长！文章将会在下列地址同步更新……
个人博客：
小程序：TaoLand