<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
.container{
width:200px;
height:200px;
border : 4px solid;
display:grid;
grid-template-rows : repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
justify-content : center;
align-items : center;
justify-items : center;
align-items : center;
}
.item{
background-color:skyblue;
border :2px solid;
width:30px;
height:30px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.