使网格行占用最小空间

马克·克维特尼

因此，我对网格布局还很陌生，并且陷入了以下问题。

到目前为止，我得到的是：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>

迈克尔·本杰明

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

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

此设置创建四个显式的行，以适应其内容的高度。第四行基于文本的高度。第一，第二和第三行基于跨三行的图像高度。该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。 `grid-template-rows: auto auto 1fr 1fr`

你写了：

“ ...但是，这给我在字幕和说明之间留了一些难看的空白。”

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

此处有更多详细信息：CSS网格布局中的百分比和fr单位之间的差异

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`

在这种情况下，您要将auto除第三行（subtitle）之外的所有行都设置为content-height （）。通过将此行设置为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>

修改后的代码笔

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-11-23

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章