使网格行占用最小空间 [英] Make grid-rows take up minimum space
本文介绍了使网格行占用最小空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我对网格布局还很陌生，并且陷入了以下问题。
到目前为止，我得到的是：
身体{背景：#ddd;颜色：＃222;字体家族：Roboto，无衬线；} * {边距：0; padding：0;}。movie {margin：20px auto;显示：网格； grid-column-gap：20px;网格模板： img日期， img头， img子， desc desc； grid-template-columns：100px自动； grid-template-rows：auto自动自动自动; / *相关代码* /宽度：500px;背景：＃f4f4f4; border-radius：3px; padding：20px;}。movie__date {网格区域：日期;}。movie__img {网格区域：img;宽度：100％；}。movie__description {网格区域：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>以我的名字呼唤我< / h1> p class = movie__subtitle>可变长度的某些字幕< / p>< p class = 电影说明＞ Lorem ipsum dolor sitmet，consetetur adipscing elitr，sed diam nonumy eirmod tempor invitunt ut labour et dolore magna aliquyam erat，sed diam voluptua。在Vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，没有大海，也没有坐在Lorem ipsum dolor。 Lorem ipsum dolor坐着，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invitunt ut Labore et dolore magna aliquyam erat，sed diam voluptua。在Vero eos etAccusam和Justo duo dolores et ea rebum。 < / p>< / div>
2。 grid-template-rows：auto auto 1fr 1fr
您写道：
...但是在字幕和描述之间留了一些难看的空白。
这是因为当您将 fr 应用于多个轨道时，会考虑容器中的整个空间，并且自由空间在这些轨道之间平均分配。在这种情况下，最后两行将平均分配可用空间。图像（不是轨道尺寸计算中的一个因素）最终位于最后一行的上方。
此处有更多详细信息：
body {背景：#ddd;颜色：＃222; font-family：Roboto，无衬线；} * {边距：0; padding：0;}。movie {margin：20px auto;显示：网格； grid-column-gap：20px;网格模板： img日期， img头， img子， desc desc； grid-template-columns：100px自动； grid-template-rows：自动自动1fr自动;宽度：500像素；背景：＃f4f4f4; border-radius：3px; padding：20px;}。movie__date {网格区域：日期;}。movie__img {网格区域：img;宽度：100％；}。movie__description {网格区域：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>以我的名字呼唤我< / h1> p class = movie__subtitle>可变长度的一些字幕< / p>< p class = 电影说明＞ Lorem ipsum dolor sitmet，consetetur adipscing elitr，sed diam nonumy eirmod tempor invitunt ut labour et dolore magna aliquyam erat，sed diam voluptua。在Vero eos et accusam et justo duo dolores et ea rebum。 Stet clita kasd gubergren，没有大海，也没有坐在Lorem ipsum dolor。 Lorem ipsum dolor坐着，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invitunt ut Labore et dolore magna aliquyam erat，sed diam voluptua。在Vero eos etAccusam和Justo duo dolores et ea rebum。 < / p>< / div>
So I'm pretty new to grid layout and I was stuck at the following problem.
What I got so far is this: codepen
And here's the relevant grid part:
grid-template:
'img date'
'img head'
'img sub'
'desc desc';
grid-template-rows: auto auto 1fr 1fr;
Now my problem is that the date, head and sub all take up equal space, but what I want is for date and head to take up the minimum available space, i.e. "stick to the top". I managed to do that by giving the first two rows fixed heights like so
grid-template-rows: 30px 50px auto auto
but that seems like an ugly solution, especially because the heading is of variable length. I also tried
grid-template-rows: auto auto 1fr 1fr
but that leaves me with some ugly white-space between the subtitle and the description.
So... what's the "grid way" of achieving my goal?
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>
解决方案
Note the differences between the following three variations.
1. grid-template-rows: auto auto auto auto
This set-up creates four explicit rows that adjust to the height of their content. The fourth row is based on the height of the text. The first, second and third rows are based on the height of the image that is spanning across all three rows. The auto value distributes space equally among the three rows. (See sections 7.2, 11.3 and 11.8 in the grid spec.)
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
You wrote:
"...but that leaves me with some ugly white-space between the subtitle and the description."
That's because when you apply the fr to multiple tracks, the entire space in the container is considered, and the free space is distributed equally among those tracks. In this case, the last two rows get an equal share of the free space. The image (which is not a factor in the track sizing calculation) ends up far above the final row.
More details here: 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. grid-template-rows: auto auto 1fr auto
In this case you're setting all rows to content-height (auto), except the third row (subtitle). By setting this row to 1fr you are telling it to consume all free space in the container. That pins the first two rows to the top and the last row to the bottom. I think this is the solution you want.
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>
这篇关于使网格行占用最小空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
