在CSS Grid中混合固定长度和repeat（）

Question

我正在尝试使用网格布局制作日历。一周中的每一天都有标题。我的目标是将标题的高度（即：网格中的第一行）设置为30px，并让其余的行拆分剩余的可用空间。

我的日历CSS如下所示：

.calendar{
    display:grid;
    grid-template-columns:repeat(1,1fr);
    grid-template-rows:30px repeat(auto-fill,1fr);
}

现在，我认为这完全可以实现我想要的功能，但是30px没有效果，并且每一行都是相等的高度。是否可以将静态值与混合repeat()？

我意识到我只能制作2个网格-一个用于标题，一个用于日间网格-但我很好奇是否有一种更清洁的方法。

演示在这里：https : //codepen.io/anon/pen/yGEaOm

.calendar{
    display:grid;
    grid-template-columns:repeat(1,1fr);
    grid-template-rows:30px repeat(auto-fill,1fr);
}

.calendar {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 30px repeat(auto-fill, 1fr);
}


/** Appearance styles that don't affect the layout */
.calendar {
  min-height: 200px;
}
.day {
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 1

简答

代替：

grid-template-rows: 30px repeat(auto-fill, 1fr)

尝试这个：

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

grid-template-rows: 30px repeat(auto-fill, 1fr)

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

解释

请注意您的代码中的此规则：

grid-template-rows: 30px repeat(auto-fill, 1fr)

此规则无效。

因此，它会被浏览器忽略并grid-template-rows回退到其默认设置：（none这意味着所有行都将由 隐式创建和调整大小grid-auto-rows，默认值为auto）。

从规范：

§ 7.2。Explicit Track Sizing: thegrid-template-rows和 grid-template-columns 属性

该none值。

表示此属性未创建显式网格轨迹（尽管仍可通过 来创建显式网格轨迹 grid-template-areas）。

注意：在没有显式网格的情况下，将隐式生成任何行/列，它们的大小将由grid-auto-rows和grid-auto-columns属性确定 。

主要问题是auto-fill(and auto-fit) 不能与固有或灵活的长度组合，例如auto,min-content或fr。

§ 7.2.2.1。的语法 repeat()

• 自动重复 (auto-fill或auto-fit) 不能与固有或灵活的大小相结合。

§ 11. 网格大小

• 固有的大小的功能是min-content，max-content，auto和fit-content()）。

• 一个灵活的尺寸调整函数是一个带有fr单位的维度。

因此，因为您的规则 ( (auto-fill, 1fr)) 包含auto-fill一个灵活的大小调整函数 ( fr)，它无法工作。

解决方案可能是使用minmax().

代替：

grid-template-rows: 30px repeat(auto-fill, 1fr)

尝试这个：

grid-template-rows: 30px repeat(auto-fill, minmax(10px, 1fr))

更多细节：

• 自动填充和自动适应有什么区别？
• minmax 失败（无效的属性值）
• 为什么 auto-fit 或 auto-fill 不能在 minmax 下正常工作？