CSS fr / 小数单位最小值太大

Question

我有一个jsfiddle。

我有什么：

我想要什么：

问题：

希望相关的部分是：

  grid-template-columns: repeat(auto-fit, 1fr);

我的部分中的两个元素都有width: max-content;。

这（以及 repeat(auto-fit, minmax(auto, 1fr)); 的扩展但技术上相同的形式）不符合我的预期 - 它创建了图片 1，我希望它看起来像图片 2。看起来这些元素的最小宽度太大了，所以不是在一行上，而是将它们放在列中。

我通过将代码更改为repeat(auto-fit, minmax(200px, 1fr)); 制作了图 2。这不是一个很好的解决方案，因为我希望最小元素大小基于网格元素的宽度，而不是任意值。

我确实希望元素能够位于不同的行上（例如，如果浏览器很窄），因此 CSS 网格似乎对这项任务很有用。我显然只是误解了一些关键方面。

问题

我可以在我的grid-template-columns 中使用什么值来使我的元素按照我对 CSS 网格的预期方式工作？有没有办法用repeat(auto-fit, X); 来做，还是我必须指定号码？

回答

如下所述，您不能将repeat(auto-fit 与fr 一起使用，因为它没有指定绝对最小值或最大值，规范说这是无效的。 Michael_B 给出了使用的答案（在他的 jdfiddle 示例评论中）

  display: flex;
  flex-wrap: wrap;

这完全符合我对 repeat(auto-fit, 1fr); 的预期。

Answer 1

这条规则不起作用。

grid-template-columns: repeat(auto-fit, 1fr)

问题在这里解释：minmax fails (invalid property value)

---

这条规则不起作用：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

问题在这里解释：minmax() defaulting to max

Answer 2

你可以使用min-content

.page-container {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: 20% 80%;
  grid-template-rows: auto auto 20rem;
  grid-template-areas: "header header" "sidebar content" "footer footer";
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 25px;
  padding: 50px;
}

.header {
  grid-area: header;
  display: grid;
  grid-template-columns: repeat(2, min-content);
  grid-gap: 10px;
}

.header>* {
  background-color: lightgreen;
}

.header a:link {
  color: inherit;
  text-decoration: none;
}

.header a:hover {
  /* https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3 */
  text-decoration: underline;
}

.header h1,
h2 {
  margin: 0;
  width: max-content;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

<div class="page-container">

  <section class="box header">
    <h1><a href="https://jeremy.richards.dev">
  Jeremy.Richards.dev
  </a></h1>
    <h2>
      and this on the
    </h2>
  </section>

  <div class="box sidebar">
    Sidebar
  </div>

  <div class="box content">
    Content
  </div>

  <div class="box footer">
    <h2 style="font-size: 2rem;">
      Something
    </h2>
    <h3 style="font-size: 1.5rem;">
      My name underneath
    </h3>
    <p>
      Linkedin/github/SO
    </p>
  </div>

</div>