CSS Grid Layout - Grid Nesting Example

<!DOCTYPE html>
<html>
<head>
<style>
/*
============== Grid Nesting ==============
*/
.grid-container {
    display: grid;
    grid-template-rows: repeat(3, fit-content);
    grid-template-columns: auto auto;
    background: #333;
    grid-gap: 5px; 
}

.grid-container-nested {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 5px;
}

.grid-item {
    position: relative;
    background: #97ff99;
    text-align: center;
    border: 1px solid #333;
    padding: 10px;   
    height: 50px;
    line-height: 50px;
}
.grid-container > .grid-item:last-child{
    height: 130px;
    line-height: 130px;
}
.grid-container-nested .grid-item{
    background: #bdd8f5;
}
/*
============== Grid Nesting ==============
*/
</style>
</head>
<body>
<h1 class="heading">Grid Nesting</h1>

<p class="description">Grid Nesting is accomplished as in the below example. In this example a grid container is nested within an other container.</p>

<div class="grid-container">
	<div class="grid-item">1</div>
	<div class="grid-item">2</div>
	<div class="grid-container-nested">
		<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>
	<div class="grid-item">4</div>
</div>

</body>
</html>