<!-- This is the grid container -->
<div class="container">
<!-- These are the elements -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
/* This is the default css we need to give because by default browser gives some margin */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
min-height: 100vh;
width: 100%;
background: #181818;
padding: 5rem;
/* for container class i made display grid */
display: grid;
/* here i'm telling how many columns i want */
grid-template-columns: 1fr 1fr 1fr;
/* gap will give a uniform space between the items inside grid */
gap: 1rem;
}
.item {
height: 100%;
width: 100%;
background: #455ce9;
border-radius: 0.5rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.