gridlayout代码注释

<div class="wrapper">             //定义一节或者一部分区域，它的css样式对应的css中class选择器的wrapper
<div class="one">One</div>        //这个区域名字叫做one
<div class="two">Two</div>        //这个区域名字叫做two
<div class="three">Three</div>    //这个区域名字叫做three
<div class="four">Four</div>     //这个区域名字叫做four
<div class="five">Five</div>     //这个区域名字叫做five
<div class="six">Six</div>       //这个区域名字叫做six
</div>      div结束的标签

.wrapper {    //带有指定类的元素
  display: grid;  //定义一个容器属性为网格布局
  grid-template-columns: repeat(3, 1fr);  //利用空格分隔的值定义网格的列和行。grid-template-columns和grid-template-rows属性来定义网格中的行和列。这些属性定义了网格的轨道。一个网格轨道就是网格中任意两条线之间的空间。值的大小，并且他们之间的空格表示网格线
  grid-gap: 10px;  //定义垂直(水平)栏与垂直(水平)栏之间的间距
  grid-auto-rows: minmax(100px, auto);//用minmax()作为grid-auto-rows的值。自动创建的行高将会是最小100px，最大为auto。用auto意味着行的尺寸将会根据内容的大小的来自动变换
}
.one {
  grid-column: 1 / 3;  //设置网格项目列方向的开始位置为1的网格线和结束为3的网格线
  grid-row: 1;        //设置网格项目行方向的开始和结束位置都为1的网格线
}
.two { 
  grid-column: 2 / 4;  //设置网格项目列方向开始位置为2的网格线和结束位置为4的网格线
  grid-row: 1 / 3;    //设置网格项目行方向开始位置为1的网格线和结束位置为3的网格线
}
.three {
  grid-column: 1;    //设置网格项目列方向开始位置和结束位置都为1的网格线
  grid-row: 2 / 5;  //设置网格项目行方向开始位置为2的网格线和结束位置为5的网格线
}
.four {
  grid-column: 3;    //设置网格项目列方向开始位置和结束位置都为3的网格线
  grid-row: 3;     //设置网格项目行方向开始和结束位置都为3的网格线
}
.five {
  grid-column: 2;    //设置网格列方向开始位置和结束位置都为2的网格线
  grid-row: 4;      //设置网格行方向开始位置和结束位置都为4的网格线
}
.six {
  grid-column: 3;    //设置网格列方向开始位置和结束位置都为3的网格线
  grid-row: 4;      //设置网格行方向开始位置和结束位置都为4的网格线
}