使 grid-rows 占用最少 space

Question

所以我对网格布局还很陌生，我被困在以下问题中。

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

这里是相关的网格部分：

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

现在我的问题是date, head 和sub 都占相等的space，但是我想要的是date 和head 占用最小可用的space，即"stick to the top"。我设法通过给前两行固定高度来做到这一点

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

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

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

但这让我在副标题和描述之间留下一些难看的 white-space。

那么...实现我的目标的"grid way"是什么？

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`

这 set-up 会创建四个显式行，以适应其内容的高度。第四行基于文本的高度。第一、第二和第三行基于跨越所有三行的图像的高度。 auto 值在三行中平均分配 space。（请参阅网格规范中的 7.2, 11.3 and 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。 `grid-template-rows: auto auto 1fr 1fr`

您写道：

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

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

此处有更多详细信息：

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

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

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

使 grid-rows 占用最少 space

Make grid-rows take up minimum space

html

css

css-grid

1。 `grid-template-rows: auto auto auto auto`

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

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

使 grid-rows 占用最少 space

Make grid-rows take up minimum space

html

css

css-grid

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

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

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

1。 `grid-template-rows: auto auto auto auto`

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

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