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

【问题标题】：How can I make my grid-template-rows to fit the content?如何使我的网格模板行适合内容？
【发布时间】：2020-08-18 18:02:43
【问题描述】：

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

.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，但它只是遵循图像的比例。

【问题讨论】：

标签： html css css-grid

【解决方案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>

【讨论】：

你会这样吗？
这不起作用，它只是弄乱了grid-template-rows 属性，并且仍然随宽度而不是内容的高度而变化。

【解决方案2】：

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

将网格高度设置为 auto，然后高度将适应内容高度。

【讨论】：

至于另一种方法，这似乎并没有覆盖窗口宽度的依赖关系。即使删除 grid-template-rows 也会使其按窗口宽度缩小和放大。这可能是使用网格的内在问题吗？

【解决方案3】：

我通过将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; 在美学上是有意义的，它不会影响布局。

【讨论】：

【解决方案4】：

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

  grid-template-rows: min-content;

当与 auto 值结合以填充您的其余高度时，这非常有用。

  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>

【讨论】：