相关疑难解决方法(0)

我正在摆弄基于CSS网格的前端,并且在前端的不同部分需要一遍又一遍地执行以下行为:

1. 具有可变行数的网格.
2. 每一行都应该有一个可变的大小(auto会这样做).
3. 最后一行应始终占用所有剩余空间.

因此,在我碰巧需要五行的情况下,这就是诀窍:

.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;
}

我一直在玩弄的变种repeat(auto-fit, auto)和repeat(auto-fill, auto),不幸的是不合法的CSS,而repeat(4, auto)或repeat(auto-fill, 30px)有.

任何的想法？这不是我无法规避的事情,但恰好"显示n个正确大小的行,然后让最后一个元素占用所有剩余空间"基本上是我的规范中所有元素的默认行为...

我已经阅读了很多关于CSS弹性框和CSS网格的教程,但坦率地说,我只是无法弄清楚如何做这个简单的(？)事情.

我想要的只是容器中的元素都与最宽的元素一样宽.

我不希望它们填满容器的整个宽度,只是增长到最大宽度.可以用CSS完成吗？

考虑这个HTML:

<div class="container">
   <button>a normal button</button>
   <button>tiny</button>
   <button>a really, really, really wide button</button>
</div>

这产生了这样的事情:

我想要的是这样的东西,它们是那个最宽按钮的宽度:

我不希望它们只是拉伸以填充页面的宽度:

可以这样做吗？如果是这样,上述HTML的CSS是什么？