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);
}


/** 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>

Answer 1

简短回答

代替：

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>

说明

在您的代码中注意以下规则：

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

此规则无效。

因此，浏览器将忽略它，并且grid-template-rows返回其默认设置：none（这意味着所有行将由grid-auto-rows隐式创建并设置其大小，默认值为§ 7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties值为auto。

根据规范：

§ 7.2.2.1. Syntax of repeat()

none 值。

指示此属性未创建任何明确的网格轨迹   （尽管仍然可以通过创建显式网格轨迹   grid-template-areas。


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

主要问题是auto-fill（和auto-fit）不能与固有或 flexible 长度结合使用，例如auto，min-content或fr。

§ 11. Grid Sizing


自动重复（auto-fill或auto-fit）不能合并   尺寸为固有或灵活。


is a dimension with the fr unit



一个固有的大小调整函数是min-content，max-content，auto和fit-content()）。



灵活的大小调整功能What is the difference between auto-fill and auto-fit?。

因此，因为您的规则（(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))

更多详细信息：

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

1 个答案:

简短回答

说明