>具有可变行数的网格.
>每行应该有一个可变大小(auto会这样做).
>最后一行应始终占用所有剩余空间.
因此,在我碰巧需要五行的情况下,这就是诀窍：
.myGridForFiveRows
{
display: grid;
grid-template-rows: auto auto auto auto 1fr;
}
但是,我真的很喜欢一个样式表,它可以为任何给定数量的行产生正确的行为.我想也许我可以以某种方式使用repeat()来做到这一点？
https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
.myGrid
{
display: grid;
grid-template-rows: repeat(auto-fit,auto) 1fr;
}
我一直在玩重复(自动适应,自动)和重复(自动填充,自动)的变体,遗憾的是不是合法的CSS,而重复(4,自动)或重复(自动填充,30px) ) 是.
任何想法？这不是我无法规避的事情,但恰好“显示n个正确大小的行,然后让最后一个元素占用所有剩余空间”基本上是我的规范中所有元素的默认行为…
解决方法
- A grid with a variable number of rows.
- Every row should have a variable size (auto will do).
- The last row should always take up all the remaining space.
FlexBox非常适合这项工作.事实上,它可能是完美的选择(取决于您的其他要求).我在下面提供了一个代码示例.
但如果网格布局是你想要的,那么我认为你会感到失望.我不相信Level 1能做到这一点.
你最接近的将是：
grid-template-rows: repeat(auto-fit,minmax(auto,1px)) 1fr;
但它不起作用,因为当前的网格规范不支持这种语法.
这是您尝试过的代码.它无效,因为auto和fr不能与自动匹配一起使用.
07001
Automatic repetitions (
auto-fillorauto-fit) cannot be combined
with intrinsic or flexible sizes.
An 07002 sizing function is
min-content,max-content,auto,fit-content().A 07003 sizing function is
<flex>(fr).
您可以通过以下方式绕过自动限制：
07004
Defines a size range greater than or equal to min and less than or
equal to max.If max < min,then max is ignored and
minmax(min,max)is treated as min.As a maximum,a
<flex>value sets the track’s flex factor; it is invalid as a minimum.
无论容器是否具有默认的自动高度或定义的高度/最小高度,这都可以正确地自动调整行的大小. demo
但它仍然无法解决最后一行问题,因为1fr仍然无效,并导致整个规则失败. demo
这样的东西是有效的：
但是自动调整不能按预期工作：10em应用于第二行. demo
如果容器定义了高度或最小高度,则规则不会按预期工作. demo
即使现在广泛使用CSS网格布局,在某些情况下,FlexBox仍然是更好的选择.
article {
display: flex;
flex-direction: column;
height: 100vh;
}
section:last-child {
flex-grow: 1;
}
section {
/* flex-basis: auto <-- this is a default setting */
margin-bottom: 10px;
background-color: lightgreen;
}
body {
margin: 0;
}
<article>
<section>text text text</section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text </section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section>
<section>text text text text text text text text text text text text text text text text text text text text text text text text text text text</section>
</article>
