CSS Grid Layout - Grid Overflow Example

<!DOCTYPE html>
<html>
<head>
<style>
/*
============== Grid Overflow ==============
*/
.grid-container-x {
    display: grid;
    grid-template-rows: repeat(2, 100px);
    grid-template-columns: repeat(3, 300px);
    overflow-x: scroll;
    background: #333;
    grid-gap: 5px; 
    margin: 20px 0;
}
.grid-container-y {
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: auto auto;
    height: 200px;
    overflow-y: scroll;
    background: #333;
    grid-gap: 5px; 
    margin: 20px 0;
}

.grid-item {
    position: relative;
    background: #97ff99; 
    border: 1px solid #333;
    padding: 10px;  
    display: flex;
    justify-content: center;
    align-items: center;
}
/*
============== Grid Overflow ==============
*/
</style>
</head>
<body>
<h1 class="heading">Grid Overflow</h1>

<p class="description">We can also handle the overflow of grid containers as in below examples. Use scrollbars to see the hidden content.</p>
<hr>
  
<h2>Overflow Horizontal</h2>
<div class="grid-container-x">
	<div class="grid-item">a</div>
	<div class="grid-item">b</div>
	<div class="grid-item">c</div>
	<div class="grid-item">d</div>
	<div class="grid-item">e</div>
	<div class="grid-item">f</div>
</div>
  
<h2>Overflow Vertical</h2>
<div class="grid-container-y">
	<div class="grid-item">a</div>
	<div class="grid-item">b</div>
	<div class="grid-item">c</div>
	<div class="grid-item">d</div>
	<div class="grid-item">e</div>
	<div class="grid-item">f</div>
</div>

</body>
</html>