在CSS网格中混合固定长度和repeat()。

简短回答

而不是:

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

试试这个:

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

.calendar {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 30px repeat(auto-fit, minmax(10px, 1fr));
  grid-row-gap: 2px;
}

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

<div class="calendar">
  <div class="day">First</div>
  <div class="day">Second</div>
</div>

解释

请在代码中注意此规则:

网格模板行:30px重复(自动填充,1fr)

此规则无效。

因此,它被浏览器忽略,并且 grid-template-rows 返回其默认设置: none (这意味着所有行都将隐式创建并按 grid-auto-rows ,默认值为 auto )

从规格:

§ 7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties

这个 没有人 价值。

指示此属性未创建显式网格轨迹 (尽管明确的网格轨迹仍然可以由 grid-template-areas )

注意:在没有显式网格的情况下,任何行/列都将 隐式生成,其大小将由 网格自动行 和 grid-auto-columns 性质。

主要问题 那是 auto-fill (和) auto-fit )不能与 内在的 或 灵活的 长度,例如 汽车 , min-content 或 fr .

§ 7.2.2.1. Syntax of repeat()

• 自动重复( 自动填充 或 自动拟合 )不能组合 具有 内在的 或 灵活的 尺寸。

§ 11. Grid Sizing

• 一个内在的大小调整函数是 最小含量 , max-content , 汽车 和 fit-content() )

• 灵活的尺寸调整功能 is a dimension with the fr unit .

因此,因为你的规则( (auto-fill, 1fr) 包含 自动填充 具有灵活的尺寸调整功能( FR )不能工作。

解决方案 可能是为了解决问题 minmax() .

而不是:

网格模板行:30px重复(自动填充,1fr)

试试这个:

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

更多细节:

• What is the difference between auto-fill and auto-fit?
• minmax fails (invalid property value)
• Why auto-fit or auto-fill not working properly with minmax?