CSS Grid Layout - Grid Container Example

<!DOCTYPE html>
<html>
<head>
<style>
/*
============== Grid Container ==============
*/
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 5px;
    background: #333;
}
.grid-item {
    position: relative;
    background: #97ff99;
    border: 1px solid #333;
    text-align: center !important;
    padding: 10px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*
============== Grid Container ==============
*/
</style>
</head>
<body>
<h1 class="heading">Grid Container</h1>

<p class="description">A grid based layout has a parent container that contains all grid items, this container is known as grid container.</p>

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>  
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>  
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
</div>

</body>
</html>