display:grid在父级高度为100%的情况下工作吗？

Question

为什么不显示:网格将我的内容拉伸到该列的高度？html结构row -col6是用bootstrap生成的。我知道我可以给父容器添加一个特定的高度，但我不想这样。有没有办法100%使用高度呢？

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; }

Answer 1

您可以向.grid-container中添加高度，如下所示：

.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;
}

这将使grid-container成为视图的整个高度。