代码示例：
/*css*/
.main{
display: grid;
width: 450px;
height: 400px;
border: 10px solid skyblue;
/* grid-template-columns设置列宽、列数 */
/* 值为：auto，根据网格大小自适应列宽 */
grid-template-columns: 70px 70px 70px 70px 70px;
/* 简写 */
grid-template-columns:repeat(5,70px);
/* grid-template-rows设置行高、行数 */
/* 值为：auto，根据网格大小自适应行高 */
grid-template-rows: 100px 100px 100px ;
/* 简写 */
grid-template-rows:repeat(3,70px);
/* fr等分网格空间 */
grid-template-columns:repeat(4,1fr);
grid-template-columns:1fr 2fr 3fr;
/* 设置默认列宽, grid-template-columns会覆盖该属性 */
grid-auto-columns: 60px;
/* 根据最大/小的网格元素设置列宽 */
grid-auto-columns:max-content | min-content;
/* 设置列宽范围 */
grid-auto-columns: minmax(50px,auto);
/* 设置默认行高、 */
grid-auto-rows:100px;
/* 根据最大/小的网格元素设置行高 */
grid-auto-columns:max-content | min-content;
/* 设置行高范围 */
grid-auto-rows: minmax(50px,auto);
/* 列，行间距 */
/* column-gap: 10px; */
/* row-gap: 10px; */
gap:10px;
/* 排列方式,默认是row */
grid-auto-flow: column;
/* 用行/列填充布局上的空白 */
grid-auto-flow: column | row dense;
/* 水平方向排列方式 */
justify-items: center;
/* 垂直方向排列方式 */
align-items: center;
justify-content: center;
align-content: center;
/* 指定网格元素在网格布局中的大小和位置 */
grid-template-areas:
'one one . . .' ;
}
.item{
color: #fff;
}
.item-1{
background: red;
/* 指定网格元素大小、位置 */
grid-area: one;
/* 指定网格元素列的开始和结束位置，span包含对应列 */
grid-column: 1 / span 3;
/* 指定网格元素行的开始和结束位置，span包含对应行 */
grid-row: 1 / 3;
}
.item-2{
background: orange;
/* 行/列 / 行/列 */
/*第二条行线和第二条行线之间，即第二行；第三条列线和第四条列线之间，即第三列*/
grid-area: 2 / 3 / 2 / 4;
}
.item-3{
background: wheat;
/* 行/列 / 行/列 */
/*第二条行线和第二条行线之间，即第二行；第三条列线和第六条列线之间，即第四五列*/
grid-area: 2 / 4 / 2 / 6;
}
.item-4{
background: lightblue;
}
.item-5{
background: violet;
}
.item-6{
background: yellowgreen;
}
.item-7{
background: goldenrod;
}
.item-8{
background: pink;
}
.item-9{
background: palevioletred;
}
.item-10{
background: paleturquoise;
}
/*html*/
<div class="main">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
<div class="item item-10">10</div>
</div>
