HTML代码：
1 <div id="box">
2 <div class="lbox box1" style="background: #F2211A;">1</div>
3 <div class="lbox box2" style="background: #909399;">2</div>
4 <div class="lbox box3" style="background: #F56C6C;">3</div>
5 <div class="lbox box4" style="background: #E6A23C;">4</div>
6 <div class="lbox box5" style="background: #67C23A;">5</div>
7 <div class="lbox box6" style="background: #303133;">6</div>
8 <div class="lbox box7" style="background: #DCDFE6;">7</div>
9 <div class="lbox box8" style="background: #606266;">8</div>
10 <div class="lbox box9" style="background: #C0C4CC;">9</div>
11 <!--<div class="lbox" style="background: #D78D3D;">10</div>-->
12 </div>
CSS代码：（父元素容器）
1 #box{
2 /*width: 550px;*/
3 display: grid;
4 text-align: center;
5 /* grid-template-columns每一列的列宽 */
6 /* grid-template-columns:100px 100px 100px; 等价于*/
7 grid-template-columns: repeat(3,100px);
8
9
10 /* grid-template-rows每一行的行高 */
11 /* grid-template-rows:100px 100px 100px 100px; 等价于*/
12 grid-template-rows: repeat(3,100px);
13
14
15 /* auto-fill有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。*/
16 /* grid-template-columns: repeat(auto-fill, 100px); */
17 /* grid-template-rows: repeat(auto-fill, 100px); */
18
19
20 /* fr表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。*/
21 /* grid-template-columns: 1fr 1fr; */
22 /* grid-template-columns: 150px 1fr 2fr;*/
23 /* grid-template-columns: repeat(auto-fill, 1fr);*/
24
25
26 /* minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。 */
27 /* grid-template-columns: 1fr 1fr minmax(100px, 1fr);列宽不小于100px，不大于1fr*/
28
29
30 /* auto关键字表示由浏览器自己决定长度。*/
31 /*grid-template-columns: 100px auto 100px;*/
32
33
34 /* 网格线的名称
35 * grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用*/
36 /*grid-template-columns: [c1] 100px [c2] 100px [c3] auto [fifth-line row-5]; 网格布局允许同一根线有多个名字，比如[fifth-line row-5]*/
37 /*grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];*/
38
39
40 /* grid-row-gap，属性设置行与行的间隔（行间距）
41 grid-column-gap，列与列的间隔（列间距）
42 grid-gap， grid-gap: <grid-row-gap> <grid-column-gap>;
43 */
44 /* grid-row-gap: 20px;
45 grid-column-gap: 20px;
46 grid-gap: 20px 20px; =>等价 grid-gap: 20px;
47 */
48
49
50 /* grid-template-areas网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。*/
51 /* grid-template-columns: 100px 100px 100px;
52 grid-template-rows: 100px 100px 100px;
53 */
54
55 /* 划分出9个单元格，将其定名为a到i的九个区域，分别对应这九个单元格
56 grid-template-areas: 'a b c'
57 'd e f'
58 'g h i';
59 */
60 /* 将9个单元格分成a、b、c三个区域
61 grid-template-areas: 'a a a'
62 'b b b'
63 'c c c';
64 */
65 /* 中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域
66 grid-template-areas: 'a . c'
67 'd . f'
68 'g . i';
69 */
70 /* 示例
71 grid-template-areas: "header header header"
72 "main main sidebar"
73 "footer footer footer";
74 */
75
76
77 /* grid-auto-flow 放置顺序默认从行后列,从上而下 */
78 /* grid-auto-flow: row; 默认
79 grid-auto-flow: row dense;
80 grid-auto-flow: column;
81 */
82
83
84 /*
85 * justify-items单元格内容的水平位置（左中右）: start | end | center | stretch(拉伸，占满单元格的整个宽度（默认值)，
86 align-items属性设置单元格内容的垂直位置（上中下）: 同上，
87 place-items: <align-items> <justify-items>; 可简写
88 */
89 /* justify-items: stretch;
90 align-items: stretch;
91 place-items: center;
92 */
93
94
95 /* justify-content 整个内容区域在容器里面的水平位置: start | end | center | stretch | space-around | space-between | space-evenly，
96 align-content 整个内容区域的垂直位置（上中下）: 同上，
97 place-content: <justify-content> <align-content>
98 */
99 /* justify-content: space-evenly ;
100 place-content:space-between space-evenly;
101 */
102
103
104 /* grid-auto-columns和grid-auto-rows设置浏览器自动创建的多余网格的列宽和行高 */
105 /*
106 grid-auto-rows: 50px;
107 grid-auto-columns: 50px;
108 */
109
110
111 /*
112 * grid-template 属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式，
113 grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式
114 */
115
116 }
117 /*.box1{
118 grid-row-start: 4;
119 grid-column-start: 2;
120 }
121 .box2{
122 grid-row-start: 5;
123 grid-column-start: 3;
124 }*/
125 /*.box3{
126 grid-row-start: 1;
127 grid-row-end: 3;
128 }*/