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网格的预期方式工作？

Answer 1

您可以使用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>

Answer 2

而不是：

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

和

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

尝试：

grid-template-columns: repeat(1px, 1fr)