代码之家 › 专栏 › 技术社区 › Sascha

CSS网格具有可变数量的“自动”行,但一行应为“1fr”

css-grid css html

Sascha · 技术社区 · 7 年前

我正在摆弄一个基于CSS网格的前端,在前端的不同部分反复需要以下行为:

具有可变行数的网格。
每一行都应该有一个可变的大小(自动即可)。
最后一行应始终占用所有剩余空间。

因此,如果我碰巧需要五行,那么这就是窍门:

.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个大小合适的行,然后让最后一个元素占用所有剩余空间”基本上是我规范中所有元素的默认行为。。。

2 回复 | 直到 7 年前

Michael Benjamin William Falcon 7 年前

考虑到您的三个要求:

具有可变行数的网格。

每一行都应该有一个可变的大小(自动即可)。

最后一行应始终占用所有剩余空间。

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 或 自动配合 )无法组合具有 固有的 或 灵活的 尺寸。

一 intrinsic 大小调整功能为 min-content , max-content , 汽车 , fit-content() .

A. flexible 大小调整功能为 <flex> ( fr公司 ).

你可以绕过 汽车 限制如下:

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

minmax(min,max)

定义大于或等于的大小范围 最小值 且小于或等于 最大值 .

如果 最大值(<);最小值 然后 最大值 被忽略,并且 minmax(最小,最大) 被视为 最小值 .

作为最大值 <灵活(>); 值设置轨迹的弹性系数;它至少是无效的。

这可以正确地自动调整行的大小,无论容器是否具有默认值 汽车 高度或a height / min-height 定义 demo

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

类似这样的内容是有效的:

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

但是 自动配合 没有如您所期望的那样工作: 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>

william burditt 3 年前

这有点像黑客,但你可以输入一个非常大的数字来重复,你永远不会跨越。例如,可以对网格模板行执行以下操作:

网格模板行:重复(100000000,自动)1fr;

我也有同样的问题,这对我很有效。