Column Not taking full height of a row - html

Question

I'm trying to make a grid view of columns.
Here is my code:
.pink{
background: pink;
}
.yellow{
background: yellow;
}
.gray{
background: gray;
}
.blue{
background: blue;
}
.green{
background: green;
}
.red{
background: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container"> <div class="row">
<div class="col-md-3 ">
<div class="col-md-12 pink">test</div>
<div class="col-md-12 yellow">test</div>
</div>
<div class="col-md-3">
<div class="col-md-12 gray">test</div>
</div>
<div class="col-md-6 ">
<div class="col-md-12 blue">test</div>
<div class="col-md-6 green">test</div>
<div class="col-md-6 red">test</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="col-md-12 green">test</div>
</div>
<div class="col-md-6">
<div class="col-md-12 pink">test</div>
</div>
<div class="col-md-3">
<div class="col-md-12 gray">test</div>
</div>
</div>
</div>
The column in gray should be of height as column pink and yellow.
The bottom Pink column is also not of full width.
Does anyone know why is this happening?
Thanks for any help.