实现一个九宫格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap{
width: 300px;
height: 300px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.wrap div{
border:1px solid red;
}
</style>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
repeat()
接收两个参数第一个参数重复次数，第二个参数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
display: grid;
grid-template-columns:repeat(4,1fr);
grid-template-rows: repeat(4,200px);
}
.box{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">测试全屏功能</div>
</div>
</body>
</html>
行、列边距
- 行边距：grid-row-gap
- 列边距：grid-column-gap
设置行间距和列间距各20px
.wrap{
display: grid;
grid-template-columns:repeat(5,10.33%);
grid-template-rows: repeat(13,200px);
grid-row-gap: 20px;
grid-column-gap: 20px;
}
