如何使网格模板行适合内容？

问题描述

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

.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溢出。如何使grid-template-rows扩展以包围文本？我已经尝试将其设置为auto，但它只是遵循图像的比例。

解决方法

尝试

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

,

.card {
  width: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: auto;
  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>

将栅格高度设为自动值，则高度将适应内容高度。

,

我通过将card-text div嵌套在另一个div中来解决了这个问题，

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

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

</div>

并按如下方式设置样式。

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

}

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

.card-text {
  margin: auto;
  width: 70%;
  padding: 5vw 0px;
}
.text p {
  top: 1vw;
}

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

这很好用，并且在我的<p></p> div（例如，card-text）中还没有<h1></h1>的其他标签的情况下，它会更有用。 background-position: center;从美学上讲是合理的，它不会影响布局。