<div class="grid-container">
<div class="grid-item gi-1">1</div>
<div class="grid-item gi-2">2</div>
<div class="grid-item gi-3">3</div>
<div class="grid-item gi-4">4</div>
<div class="grid-item gi-5">5</div>
<div class="grid-item gi-6">6</div>
<div class="grid-item gi-7">7</div>
<div class="grid-item gi-8">8</div>
<div class="grid-item gi-9">9</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 2%;
}
.grid-container {
width: 310px;
height: 310px;
border: 5px solid #212226;
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(3, 50px);
row-gap: 10px;
column-gap: 10px;
justify-content: center;
align-content: center;
}
.grid-item {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
color: #71D99E;
background-color: #3A8C7D;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.