使网格行占用最小空间

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。 grid-template-rows: auto auto auto auto

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

您写道：

  

＆＃34; ...但是在字幕和描述之间留下了一些丑陋的空格。＆＃34;

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

此处有更多详情：The difference between percentage and fr units in CSS Grid Layout

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

revised codepen