具有可变数量的“自动”行的CSS网格，但是一行应该采用“1fr”

Question

我正在摆弄基于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个正确大小的行，然后让最后一个元素占用所有剩余空间”基本上是我的规范中所有元素的默认行为......

Answer 1

考虑您的三个要求：

  

  
1. 具有可变行数的网格。
  
2. 每一行都应该有一个可变的大小（auto会这样做。）
  
3. 最后一行应该占用剩下的所有空间。
  

Flexbox非常适合这项工作。事实上，它可能是完美的契合（取决于您的其他要求）。我在下面提供了一个代码示例。

但如果网格布局是你想要的，那么我认为你会感到失望。我不相信Level 1可以胜任这项工作。

你能得到的最接近的是：

grid-template-rows: repeat(auto-fit, minmax(auto, 1px)) 1fr;

但它不会起作用，因为当前的网格规范不支持这种语法。

repeat(auto-fit, auto) 1fr

这是您尝试过的代码。它无效，因为auto和fr无法与auto-fit一起使用。

  

7.2.2.1. Syntax of repeat()

     

无法合并自动重复（auto-fill或auto-fit）   内在或灵活尺寸。

     

  

• intrinsic大小调整功能为min-content，max-content，auto，fit-content()。

  

• flexible大小调整功能为<flex>（fr）。

  

您可以使用以下内容解决auto限制：

repeat(auto-fit, minmax(auto, 1px)) 1fr

  

minmax(min,max)

     

定义大于或等于 min 且小于或的尺寸范围   等于 max 。

     

如果 max＆lt; min ，然后 max 被忽略，minmax(min,max)被视为 min 。

     

作为最大值，<flex>值设置轨道的flex因子;它至少是无效的。

无论容器是否具有默认的auto高度或height / min-height定义，这都可以正确自动调整行的大小。 demo

但它仍然无法解决最后一行问题，因为1fr仍然无效，导致整个规则失败。 demo

这样的事情是有效的：

repeat(auto-fit, minmax(auto, 1px)) 10em

但是auto-fit并没有按预期工作：10em应用于第二行。 demo

如果容器定义了height或min-height，则规则无法按预期工作。 demo

即使现在广泛使用CSS网格布局，在某些情况下，Flexbox仍然是更好的选择。

通过干净简单的代码涵盖了您的所有要求：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;