CSS所提供的关于网格Grid属性让我们可以更方便编写页面以及布局，而它的一些主要应用属性如下：
1.将父容器的display属性值设置为grid 即可将其转换为网格容器；
2.在网格容器中添加列的属性：grid-template-columns;
ag：
1 <div class="container"> 2 <div class="d1">1</div> 3 <div class="d2">2</div> 4 <div class="d3">3</div> 5 <div class="d4">4</div> 6 <div class="d5">5</div> 7 </div> 8 9 10 11 12 <style> 13 .d1{background:LightSkyBlue;} 14 .d2{background:LightSalmon;} 15 .d3{background:PaleTurquoise;} 16 .d4{background:LightPink;} 17 .d5{background:PaleGreen;} 18 19 .container { 20 font-size: 40px; 21 width: 100%; 22 background: LightGray; 23 display: grid; 24 /* add your code below this line */ 25 grid-template-columns:100px 100px 100px; 26 27 /* add your code above this line */ 28 } 29 </style>
效果：
3.在网格容器中添加行的属性：grid-template-rows;(用法与添加列的方法一致)；
4.改变行/列尺寸的单位有：fr :可用区域；auto:自定义尺寸； xxpx:具体的px值；
5.创建空白列宽（列间隙）：grid-columns-gap；
ag:以上同一个栗子，修改其父元素contain的属性，代码如下：
1 .container { 2 font-size: 40px; 3 min-height: 300px; 4 width: 100%; 5 background: LightGray; 6 display: grid; 7 grid-template-columns: 1fr 1fr 1fr; 8 grid-template-rows: 1fr 1fr 1fr; 9 10 grid-column-gap:20px; //列宽20px; 11 12 }
效果如下：
6.创建行间隙：grid-row-gap;(用法同添加列间隙一致)；
7.由5,6条综合，为了更方便的创建行间距与列间隙（快捷方式）：grid-gap属性；
8.改变一个网格中的一个方格占据的列宽：grid-column;该属性的工作原理：以下的表格中列从左往右数，行从上往下数；
还是以上的栗子，改变其item5的样式：
1 .item5 { 2 background: PaleGreen; 3 4 grid-column:2/4; //从第二条列间隙—第四条，即从第二列到第三列 5 6 }
效果如下：
9.改变一个方格的占据行高：grid-row属性；（原理同上）；
10.单元格与单元格对齐的属性设置：justify-self；
该属性接收以下参数：stretch:默认填充整个单元格； start：左对齐； center:居中对齐； end:右对齐；
11.单元格与单元格垂直方向对齐设置：align-self属性；（接受的值与垂直方向一致）
12.水平方向上对齐所有的项：justify-items;(接收参数与以上对齐属性接收的值一致）；
13.垂直方向上对齐所有的项的属性;align-items;(接收参数与以上对齐属性接收的值一致）；