<div class="container">
<div></div>
</div>
.container {
width: 300px;
height: 300px;
border: 5px solid grey;
margin: 10px auto;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
div {
border: 1px solid purple;
// 行从第二根栅格线开始
grid-row-start: 2;
// 列从第二根栅格线开始
grid-column-start: 2;
// 行到第三根栅格线结束
grid-row-end: 3;
// 列到第三根栅格线结束
grid-column-end: 3;
background-color: purple;
background-clip: content-box;
padding: 10px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.