Html 如何让 CSS Grid 项占用剩余空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45799207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make CSS Grid items take up remaining space?
提问by Jens T?rnell
I have a card built with CSS Grid layout. There might be an image to the left, some text to the right top and maybe a button or a link at the right bottom.
我有一张用 CSS 网格布局构建的卡片。左边可能有一个图像，右上角可能有一些文本，右下角可能有一个按钮或一个链接。
In the code below, how can I make the green area take up as much space as possible and at the same time make the blue area take up as little space as possible?
在下面的代码中，如何让绿色区域占用尽可能多的空间，同时让蓝色区域占用尽可能少的空间？
The green should push the blue area down as far as possible.
绿色应该尽可能地将蓝色区域向下推。
https://jsfiddle.net/9nxpvs5m/
https://jsfiddle.net/9nxpvs5m/
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"one two"
"one three"
}
.one {
background: red;
grid-area: one;
padding: 50px 0;
}
.two {
background: green;
grid-area: two;
}
.three {
background: blue;
grid-area: three;
}<div class="grid">
<div class="one">
One
</div>
<div class="two">
Two
</div>
<div class="three">
Three
</div>
</div>回答by Kevin Powell
Adding grid-template-rows: 1fr min-content;to your .gridwill get you exactly what you're after :).
添加grid-template-rows: 1fr min-content;到您的.grid遗嘱中可以让您得到您想要的东西:)。
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: 1fr min-content;
grid-template-areas:
"one two"
"one three"
}
.one {
background: red;
grid-area: one;
padding: 50px 0;
}
.two {
background: green;
grid-area: two;
}
.three {
background: blue;
grid-area: three;
}<div class="grid">
<div class="one">
One
</div>
<div class="two">
Two
</div>
<div class="three">
Three
</div>
</div>Jens edits:For better browser support this can be used instead: grid-template-rows: 1fr auto;, at least in this exact case.
Jens 编辑：为了更好的浏览器支持，可以改为使用：grid-template-rows: 1fr auto;，至少在这种情况下。
回答by Michael Benjamin
A grid is a series of intersecting rows and columns.
网格是一系列相交的行和列。
You want the two items in the second column to automatically adjust their row height based on their content height.
您希望第二列中的两个项目根据其内容高度自动调整其行高。
That's not how a grid works. Such changes to the row height in the second column would also affect the first column.
这不是网格的工作方式。对第二列中行高的这种更改也会影响第一列。
If you must use CSS Grid, then what I would do is give the container, let's say, 12 rows, then have items span rows as necessary.
如果您必须使用 CSS Grid，那么我要做的就是给容器提供 12 行，然后根据需要让项目跨越行。
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: repeat(12, 15px);
}
.one {
grid-row: 1 / -1;
background: red;
}
.two {
grid-row: span 10;
background: lightgreen;
}
.three {
grid-row: span 2;
background: aqua;
}
.grid > div {
display: flex;
align-items: center;
justify-content: center;
}<div class="grid">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>Otherwise, you can try a flexbox solution.
否则，您可以尝试使用 flexbox 解决方案。
.grid {
display: flex;
flex-flow: column wrap;
height: 200px;
}
.one {
flex: 0 0 100%;
width: 30%;
background: red;
}
.two {
flex: 1 0 1px;
width: 70%;
background: lightgreen;
}
.three {
background: aqua;
}
.grid>div {
display: flex;
align-items: center;
justify-content: center;
}<div class="grid">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>回答by sol
A possible approach might be grouping twoand threetogether, and using flexbox:
一种可能的方法可能是分组two和three组合在一起，并使用flexbox：
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-areas: "one two"
}
.one {
background: red;
grid-area: one;
padding: 50px 0;
}
.wrap {
grid-area: two;
display: flex;
flex-direction: column;
}
.two {
background: green;
flex: 1;
}
.three {
background: blue;
}<div class="grid">
<div class="one">
One
</div>
<div class="wrap">
<div class="two">
Two
</div>
<div class="three">
Three
</div>
</div>
</div>回答by gymnast66x
Definitely not the most elegant solution and probably not best practice, but you could always add more lines of
绝对不是最优雅的解决方案，也可能不是最佳实践，但您总是可以添加更多行
"one two"
before the part where you have
在你拥有的部分之前
"one three"
so it ends up looking like
所以它最终看起来像
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"one two"
"one two"
"one two"
"one three"
}
Again, pretty sure this is just a work around and there's better solutions out there... But this does work, to be fair.
同样，很确定这只是一种解决方法，并且有更好的解决方案......但公平地说，这确实有效。
回答by dean filigreti
When using grid, and you have grid template area used, and by chance you gave a particular area a width, you are left with a space grid does automatically. In this situation, let grid-template-columns be either min-content or max-content, so that it adjusts its position automatically.
使用网格时，您使用了网格模板区域，并且偶然地给了特定区域一个宽度，您会自动留下一个空间网格。在这种情况下，让 grid-template-columns 为 min-content 或 max-content，以便它自动调整其位置。
