Does display:grid work with height 100% on parent?

Question

Why doesn't display:grid stretch my content to the height of this column? The html structure row - col-6 is made with bootstrap. I know I can add a specific height to the parent container but I don't want this. Is there any way to use height 100% on it?

HTML:

<div class="row">
<div class="col-6">
Some content 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-6 { grid-area: Area-6; }

score 0 · Answer 1 · answered Aug 28 '20 at 14:44

You could add height into the .grid-container like:

.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";
  border: 1px solid black;
  height: 100vh;
}

This would make the grid-container the entire height of the view.

Does display:grid work with height 100% on parent?

1 Answers1