为什么我的css中的网格项如此短？

我是css新手

这是我的问题：我的网格框太短了，以至于它们切断了我的代码（我想这就是正在发生的事情）。我不知道为什么它把网格框定义得这么短

（如果可能的话，我想要适合我的div数量的长列。）

任何帮助都将不胜感激

.grid-container {
    display: grid;
    grid-template-columns: .5fr 3fr 3fr .5fr;
    grid-gap: 20px;
    grid-template-areas: "header header header header"
    "sidebar content2 content sidebar2"
    "sidebar content2 content sidebar2"
    "sidebar content2 content sidebar2";
    height: 100vh;
    grid-column-gap: 150px;
    grid-row-gap: 80px;
}

.grid-item-1 {
    grid-area: header;
}


.grid-item-2 {
    background-image: url("brick.png");
    background-size: 300px;
    background-repeat: no-repeat;
    position: relative;
    top: 70px;
    grid-area: content;
}


.grid-item-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    display: grid;
    position: relative;

} 
.grid-item-01 {
    grid-area:sidebar;
}
.grid-item-0 {
    grid-area: sidebar2;
}

---

我想我会回答的，以防有人在谷歌上搜索到这个需要帮助

---

我将每个部分的高度更改为“高度：自动”。现在，我的列会自动调整以适应我添加到其中的任何内容。我不确定这是否是最好的解决方案。。。但是它成功了。

请同时发布HTML。当我们可以重现这个问题时，我们可以更好地帮助你。就像@MichaelBenjamin建议的那样：也请发布HTML。当我们可以重现问题时，我们可以更好地帮助您。