Why doesn't the display:grid property stretch my content to the height of this column? The HTML structure row - col-6 is created using Bootstrap. I am aware that I can manually set a specific height for the parent container, but I would prefer not to do so. Is there a way to make use of height 100% without specifying it?
HTML:
<div class="row">
<div class="col-6">
Some content goes here
</div>
<div class="col-6">
<div class="grid-container">
<div class="Area-1">
<h4>Area 1</h4>
<p>area 1</p>
</div>
<div class="Area-2">
<h4>Area 2</h4>
<p>area 2</p>
</div>
<div class="Area-3">
<h4>Area 3</h4>
<p>area 3</p>
</div>
<div class="Area-4">
<h4>Area 4</h4>
<p>area 4</p>
</div>
<div class="Area-5">
<h4>Area 5</h4>
<p>area 5</p>
</div>
<div class="Area-6">
<h4>Area 6</h4>
<p>area 6</p>
</div>
</div>
</div>
</div>
CSS:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 15px 15px;
grid-template-areas: "Area-1 Area-4" "Area-1 Area-4" "Area-1 Area-5" "Area-2 Area-5" "Area-2 Area-6" "Area-3 Area-6" "Area-3 Area-6";
}
.Area-1 { grid-area: Area-1;}
.Area-2 { grid-area: Area-2; }
.Area-3 { grid-area: Area-3; }
.Area-5 { grid-area: Area-5; }
.Area-4 { grid-area: Area-4; }
.Area-61 { grid-area: Area-6; }