CSS Grid Layout - Grid Alignment Example

<!DOCTYPE html>
<html>
<head>
<style>
/*
============== Grid Alignment ==============
*/
.grid-container-1,
.grid-container-2 {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, auto);
    height: 150px;
    background: #333;
    padding: 20px;
}

.grid-container-2 {
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.grid-container-1 .grid-item,
.grid-container-2 .grid-item {
    width: 50px;
    height: 50px;
}

.grid-item {
    position: relative;
    background: #97ff99;
    text-align: center;
    border: 1px solid #333;
    padding: 10px;  
    height: 50px;
    line-height: 50px;
}
/*
============== Grid Alignment ==============
*/
  
h2 { 
    font-size: 26px;
    margin: 30px 0 10px 0;
    font-family: Calibri;
}
</style>
</head>
<body>
<h1 class="heading">Grid Alignment</h1>

<p class="description">We can align the grid items as follows</p>
<hr>
<h2>Not Aligned</h2>
<div class="grid-container-1">
	<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>
<h2>Aligned</h2>
<div class="grid-container-2">
	<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>

</body>
</html>