<div class="container">
<div></div>
</div>
.container {
width: 300px;
height: 300px;
margin: 10px auto;
border: 1px solid grey;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
div {
box-sizing: border-box;
border: 1px solid purple;
background-color: purple;
padding: 10px;
background-clip: content-box;
grid-area: 2/2/3/3;
}
}
View Compiled
This Pen doesn't use any external CSS resources.