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

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

css-grid css3 css html

Quasipickle · 技术社区 · 7 年前

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

我的日历CSS如下所示:

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

现在,我思想那完全符合我的要求,但是 30px 没有效果,每行的高度相等。是否可以混合静态值和 repeat() ?

我知道我可以制作两个网格——一个用于标题,一个用于白天——但是我很好奇是否有一种更干净的方法。

演示: https://codepen.io/anon/pen/yGEaOm

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

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

1 回复 | 直到 7 年前

Michael Benjamin William Falcon 7 年前

简短回答

而不是:

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

更多细节: