display：grid是否在父级上高度为100％的情况下工作？

问题描述

为什么不显示：网格将我的内容拉伸到此列的高度？ html结构行-col-6由引导程序制成。 我知道我可以为父容器添加特定的高度，但是我不希望这样。有什么办法可以在高度上使用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; }

解决方法

您可以将高度添加到.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成为视图的整个高度。