html - 使网格行占用最小空间

Question

所以我对网格布局还很陌生，并且遇到了以下问题。

到目前为止我得到的是:codepen

这是相关的网格部分:

grid-template:
  'img date'
  'img head'
  'img sub'
  'desc desc';
grid-template-rows: auto auto 1fr 1fr;

现在我的问题是日期、头部和子都占用相同的空间，但我想要的是日期和头部占用最小的可用空间，即“粘在顶部”。我设法通过给前两行固定高度来做到这一点，如下所示

grid-template-rows: 30px 50px auto auto

但这似乎是一个丑陋的解决方案，特别是因为标题的长度是可变的。我也尝试过

grid-template-rows: auto auto 1fr 1fr

但这在副标题和描述之间留下了一些难看的空白。

那么......实现我的目标的“网格方式”是什么？

body {
  background: #ddd;
  color: #222;
  font-family: Roboto, sans-serif;
}

* {
  margin: 0; padding: 0;
}

.movie {
  margin: 20px auto;
  display: grid;
  grid-column-gap: 20px;
  grid-template:
    'img date'
    'img head'
    'img sub'
    'desc desc';
  grid-template-columns: 100px auto;
  /* grid-template-rows: auto auto 1fr 1fr; */
  width: 500px;
  background: #f4f4f4;
  border-radius: 3px;
  padding: 20px;
}

.movie__date {
  grid-area: date;
}

.movie__img {
  grid-area: img;
  width: 100%;
}

.movie__description {
  grid-area: desc;
  margin-top: 20px;
}

.movie__subtite {
  grid-area: sub;
}

.movie__heading {
  grid-area: head;
}

<div class="movie">
  <img src="https://image.tmdb.org/t/p/w1280/nPTjj6ZfBXXBwOhd7iUy6tyuKWt.jpg" class="movie__img"></img>
<p class="movie__date">03/17/18</p>
<h1 class="movie__heading">Call Me By Your Name</h1>
<p class="movie__subtitle">some subtitle of variable length</p>
<p class="movie__description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

Answer 1

请注意以下三个变体之间的差异。

1。 网格模板行:自动自动自动

此设置创建了四个显式行，可根据其内容的高度进行调整。第四行基于文本的高度。第一、第二和第三行基于跨越所有三行的图像的高度。 auto 值在三行之间平均分配空间。 (请参阅网格规范中的 7.2 、 11.3 和 11.8 部分。)

body {
  background: #ddd;
  color: #222;
  font-family: Roboto, sans-serif;
}

* {
  margin: 0; padding: 0;
}

.movie {
  margin: 20px auto;
  display: grid;
  grid-column-gap: 20px;
  grid-template:
    'img date'
    'img head'
    'img sub'
    'desc desc';
  grid-template-columns: 100px auto;
  grid-template-rows: auto auto auto auto; /* relevant code */
  width: 500px;
  background: #f4f4f4;
  border-radius: 3px;
  padding: 20px;
}

.movie__date {
  grid-area: date;
}

.movie__img {
  grid-area: img;
  width: 100%;
}

.movie__description {
  grid-area: desc;
  margin-top: 20px;
}

.movie__subtite {
  grid-area: sub;
}

.movie__heading {
  grid-area: head;
}

<div class="movie">
  <img src="https://image.tmdb.org/t/p/w1280/nPTjj6ZfBXXBwOhd7iUy6tyuKWt.jpg" class="movie__img"></img>
<p class="movie__date">03/17/18</p>
<h1 class="movie__heading">Call Me By Your Name</h1>
<p class="movie__subtitle">some subtitle of variable length</p>
<p class="movie__description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

---

2。 网格模板行:auto auto 1fr 1fr

你写道:

"...but that leaves me with some ugly white-space between the subtitle and the description."

这是因为当您将 fr 应用到多个轨道时，会考虑容器中的整个空间，并且可用空间在这些轨道之间平均分配。在这种情况下，最后两行获得相同份额的可用空间。图像(不是轨道大小计算中的一个因素)最终远远高于最后一行。

更多详细信息请参见:The difference between percentage and fr units in CSS Grid Layout

body {
  background: #ddd;
  color: #222;
  font-family: Roboto, sans-serif;
}

* {
  margin: 0; padding: 0;
}

.movie {
  margin: 20px auto;
  display: grid;
  grid-column-gap: 20px;
  grid-template:
    'img date'
    'img head'
    'img sub'
    'desc desc';
  grid-template-columns: 100px auto;
  grid-template-rows: auto auto 1fr 1fr;
  width: 500px;
  background: #f4f4f4;
  border-radius: 3px;
  padding: 20px;
}

.movie__date {
  grid-area: date;
}

.movie__img {
  grid-area: img;
  width: 100%;
}

.movie__description {
  grid-area: desc;
  margin-top: 20px;
}

.movie__subtite {
  grid-area: sub;
}

.movie__heading {
  grid-area: head;
}

<div class="movie">
  <img src="https://image.tmdb.org/t/p/w1280/nPTjj6ZfBXXBwOhd7iUy6tyuKWt.jpg" class="movie__img"></img>
<p class="movie__date">03/17/18</p>
<h1 class="movie__heading">Call Me By Your Name</h1>
<p class="movie__subtitle">some subtitle of variable length</p>
<p class="movie__description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

---

3。 网格模板行:auto auto 1fr auto

在本例中，您将除第三行 (subtitle) 之外的所有行设置为 content-height (auto)。通过将此行设置为 1fr，您将告诉它消耗容器中的所有可用空间。这会将前两行固定在顶部，最后一行固定在底部。 我认为这就是您想要的解决方案。

body {
  background: #ddd;
  color: #222;
  font-family: Roboto, sans-serif;
}

* {
  margin: 0; padding: 0;
}

.movie {
  margin: 20px auto;
  display: grid;
  grid-column-gap: 20px;
  grid-template:
    'img date'
    'img head'
    'img sub'
    'desc desc';
  grid-template-columns: 100px auto;
  grid-template-rows: auto auto 1fr auto;
  width: 500px;
  background: #f4f4f4;
  border-radius: 3px;
  padding: 20px;
}

.movie__date {
  grid-area: date;
}

.movie__img {
  grid-area: img;
  width: 100%;
}

.movie__description {
  grid-area: desc;
  margin-top: 20px;
}

.movie__subtite {
  grid-area: sub;
}

.movie__heading {
  grid-area: head;
}

<div class="movie">
  <img src="https://image.tmdb.org/t/p/w1280/nPTjj6ZfBXXBwOhd7iUy6tyuKWt.jpg" class="movie__img"></img>
<p class="movie__date">03/17/18</p>
<h1 class="movie__heading">Call Me By Your Name</h1>
<p class="movie__subtitle">some subtitle of variable length</p>
<p class="movie__description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

revised codepen