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

Question

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

 .card { width: 100%; display: grid; grid-template-columns: 60% 40%; grid-template-rows: 50vw; grid-template-areas: "ab" }.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>

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

Answer 1

在 grid-template-row 属性上使用 min-content 值：

  grid-template-rows: min-content;

这在与自动值结合以填充您的身高 rest 时非常有用。

  grid-template-rows: auto;

 .card { width: 100%; height:50vh; display: grid; grid-template-columns: 1fr; grid-template-rows: min-content auto; grid-template-areas: "a"; }.card-text1 { grid-area: a; background-color: #02B277; }.card-text2 { background-color: cyan; }.card-text1 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-text1"> <p>Lorem ipsum blablabla</p> </div> <div class="card-text2"> <p>Lorem ipsum blablabla</p> </div> <div class="image"> </div> </div>

Answer 2

试试这个

.card {
     place-items: center;
}

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

Answer 3

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

给网格高度值自动，然后高度将适应内容高度。

Answer 4

我通过将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;
}

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