文字超出网格高度

Question

我是html和CSS的新手，我正在尝试学习网格布局，但是这个问题一直困扰着我..这是我的代码...

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 1em;
    grid-auto-rows: minmax(300px, auto);
}
.grid > div{
    padding:1em;
    background: #eee;
}
.card1 {
    margin-left: 30px;
    height:300px;
}

<div class="grid">
    <div class="card1">
        <img class="card-img-top" src="img/profilepicbg.jpg">
        <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
    <div class="card2">
        <img class="card-img-top" src="img/profilepicbg.jpg">
        <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
    <div class="card3">
        <img class="card-img-top" src="img/profilepicbg.jpg">

        <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
    <div class="card4">
        <img class="card-img-top" src="img/profilepicbg.jpg" alt="Card image cap">
          <div class="card-body">
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
    </div>
</div>

每当我放大或调整浏览器大小时，card1中的文本就会不断超出网格高度。.其他卡工作正常，但是如果我指定了发生问题的特定高度。.感谢您的帮助