具有可变数目“自动”的CSS网格行，但是一行应该取“1fr” [英] CSS Grid with variable number of "auto" rows, but one row should take "1fr"

问题描述

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

1. 具有可变行数的网格。


2. 每行应该有一个可变大小（auto会做）。最后一行应该总是占用剩下的所有空间。

所以在我碰巧需要五行的情况下，这样做的窍门是：

  .myGridForFiveRows 
 {
 display：grid; 
 grid-template-rows：auto auto auto auto 1fr; 
} 
  

然而，我真的很喜欢一个样式表，给定的行数。我想也许我可以以某种方式使用 repeat（）来做到这一点？

https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeat

  .myGrid 
 {
 display：grid; 
 grid-template-rows：repeat（auto-fit，auto）1fr; 
} 
  

我一直使用变体重复（auto-fit，auto）和 repeat（自动填充，自动填充，自动填充），不幸的是这些CSS不合法，而 repeat（4，auto）或 repeat（自动填充，30px）。

有什么想法？这不是我不能绕过的，但是恰巧显示n行适当大小，然后让最后一个元素占用剩余空间基本上是我规范中所有元素的默认行为。

1. 具有可变行数的网格。


2. 每行都应该有一个可变大小（自动执行）。 >最后一行应该占用所有剩余空间。

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

但是，如果Grid Layout是您想要的，那么我认为您会感到失望。我不相信 1级 可以做这项工作。

您可以得到的最接近的是：

  grid-template-rows：repeat（auto-fit，minmax（auto，1px））1fr; 
  

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

repeat（auto-fit，auto）1fr

是你试过的代码。这是无效的，因为 auto 和 fr 不能与自动匹配。

7.2.2.1。
repeat（） 的语法

自动重复（<$ code>自动填充或 auto-fit ）不能与$ 内部或 flexible size。

• An intrinsic 大小调整函数为 min-content ， max-content ， auto ， fit-content（）。




• A < flex> （ fr




您可以避开<$ c $> c> auto 限制如下：

repeat（auto-fit，minmax（auto，1px）） 1fr

定义大于或等于 min 的大小范围，小于或等于 max的
。

如果 max < min ，则忽略 max ，并将 minmax（min，max）视为 min / p>

作为最大值，< flex> 值设置曲目的弹性因子;它至少是无效的。

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

但它仍然没有' t解决最后一行问题，因为 1fr 保持无效，并导致整个规则失败。 demo

类似这样的有效：

重复（auto-fit，minmax（auto，1px））10em

但是 auto-fit 不能像你期望的那样工作： 10em 应用于第二行。 demo

而且规则并没有' t如果容器的 height 或 min-height 定义了，则按预期工作。 demo

---

即使现在CSS Grid Layout已经广泛使用，在某些情况下，Flexbox依然是更好的选择。

这涵盖了所有您需要的简洁的代码：

article {display：flex; flex-direction：列; height：100vh;} section：last-child {flex-grow：1;} section {/ * flex-basis：auto< - 这是一个默认设置* / margin-bottom：10px; background-color：lightgreen;} body {margin：0;}

<物品> < section>文字文字文字< / section> < section>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本text text text text text text text text text text text text text< / section> < section>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本< / section> < section>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本< / section> < section> text text text text text text text text text text text text text text text text text text text text text text< / section>< / article>

I'm fiddling around with a CSS grid-based frontend and the following behaviour is required over and over and over again in different parts of the frontend:

1. A grid with a variable number of rows.
2. Every row should have a variable size (auto will do).
3. The last row should always take up all the remaining space.

So in the case I happen to need five rows, this does the trick:

.myGridForFiveRows
{
    display: grid;
    grid-template-rows: auto auto auto auto 1fr;
}

However, I'd really like a stylesheet that yields the correct behaviour for any given number of rows. I thought maybe I could somehow use repeat() to do this?

https://developer.mozilla.org/en-US/docs/Web/CSS/repeat

.myGrid
{
    display: grid;
    grid-template-rows: repeat(auto-fit, auto) 1fr;
}

I've been playing around with variants of repeat(auto-fit, auto) and repeat(auto-fill, auto), which unfortunately aren't legit CSS, while repeat(4, auto) or repeat(auto-fill, 30px) are.

Any idea? It's not something I can't circumvent, but it just so happens that "display n properly sized rows, then let the last element take up all the remaining space" is basically the default behaviour for all elements in my spec...

解决方案

Considering your three requirements:

1. A grid with a variable number of rows.
2. Every row should have a variable size (auto will do).
3. The last row should always take up all the remaining space.

Flexbox is well-suited for the job. In fact, it may be the perfect fit (depending on your other requirements). I've provided a code sample below.

But if Grid Layout is what you want, then I think you're going to be disappointed. I don't believe Level 1 can do the job.

The closest you can get would be:

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

But it won't work because the current grid spec doesn't support this syntax.

repeat(auto-fit, auto) 1fr

This is the code you tried. It's not valid because auto and fr cannot be used with auto-fit.

7.2.2.1. Syntax of repeat()

Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes.

• An intrinsic sizing function is min-content, max-content, auto, fit-content().

• A flexible sizing function is <flex> (fr).

You can get around the auto limitation with something like this:

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

minmax(min,max)

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.

That works to properly auto-size your rows, whether the container has the default auto height or a height / min-height defined. demo

But it still doesn't solve the last row problem, since the 1fr remains invalid, and causes the entire rule to fail. demo

Something like this would be valid:

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

But the auto-fit doesn't work as you expect: the 10em is applied to the second row. demo

And the rule doesn't work as expected if the container has a height or min-height defined. demo

---

Even with CSS Grid Layout now widely available, Flexbox is still the better choice in some cases.

This covers all your requirements with clean and simple code:

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>

这篇关于具有可变数目“自动”的CSS网格行，但是一行应该取“1fr”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！