html - 如何使我的网格模板行适合内容？

Question

我有一个由两个元素组成的网格，一个图像和一些文本。

.card {
  width: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 50vw;
  grid-template-areas:
  "a b"
}

.card-text {
  grid-area: a;
  background-color: #02B277;
}

.card-text p {
  width: 70%;
  margin: auto;
  top: 10rem;
  font-weight: 500;
}

.image {
  background: url('img/placeholder.jpg');
  background-size: cover;
  grid-area: b;
}

<div class="card">

      <div class="card-text">
       <p>Lorem ipsum blablabla</p>
      </div>

      <div class="image">
      </div>

</div>

当窗口水平收缩时，文本具有固定的 font-size , 自动垂直扩展，溢出 div。如何使网格模板行扩展以包含文本？我已经尝试将其设置为 auto但它只是遵循图像的比例。

Answer 1

试试这个

.card {
     place-items: center;
}

.card {
  width: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto;
  grid-template-areas:
  "a b";
  place-items: center;
}

.card-text {
  grid-area: a;
  background-color: #02B277;
}

.card-text p {
  width: 70%;
  margin: auto;
  top: 10rem;
  font-weight: 500;
}

.image {
  background: url('img/placeholder.jpg');
  background-size: cover;
  grid-area: b;
}

<div class="card">

      <div class="card-text">
       <p>Lorem ipsum blablabla</p>
      </div>

      <div class="image">
      </div>

</div>