持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第23天，点击查看活动详情
“gap”：行列添加间隔
grid-column-gap：列之间添加间隔grid-row-gap：行之间添加间隔
例如 grid-gap: 10px 20px;（表示行间距为10px，列间距为20px；）
代码实现例如举例里：
<style type="text/css">
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: auto 50px 10% 1fr 2fr;
grid-column-gap: 20px;
//添加列间距为20px
}
</style>
</head>
<body>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
</body>
//举例参考：https://blog.csdn.net/m0_56504343article/details/121538254?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166636499916800182124482%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166636499916800182124482&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-121538254-null-null.142%5Ev59%5Epc_search_tree,201%5Ev3%5Eadd_ask&utm_term=CSS%20%E7%BD%91%E6%A0%BC&spm=1018.2226.3001.4187
"lines"实现间隔“线”
网格中，假想的水平线和垂直线被称为线（lines）;网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数
代码实现例如举例里的
grid-column: 1 / 4：表示从第一条线到第四条线的位置为一个列
grid-row: 3 / 4：表示从第三条线到第四条线的位置为一个行
<style type="text/css">
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{
background:PaleGreen;
grid-column: 1 / 4;
grid-row: 3 / 4;
}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
</body>
//举例参考：https://blog.csdn.net/m0_56504343article/details/121538254?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166636499916800182124482%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166636499916800182124482&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-2-121538254-null-null.142%5Ev59%5Epc_search_tree,201%5Ev3%5Eadd_ask&utm_term=CSS%20%E7%BD%91%E6%A0%BC&spm=1018.2226.3001.4187
写在最后
重新开始更文啦！最近忙了一段时间，终于继续可以学习！感谢大家的支持！我会继续努力坚持学习！养成了好习惯，每天必定会抽出时间多多少少学习前端知识～
以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～ （学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）
附上学习链接，感谢这些大佬出题和解答：
