CSS网格调整内容并不适用于所有值

Question

有人能帮我解释为什么CSS网格证明内容不起作用吗？对于本例，当我将列更改为100px时，证明内容有效，但值拉伸不起作用。然后，当我将列更改为1fr时，证明内容并不适用于所有值。证明项目和证明内容之间有区别吗？我不明白。CodeAcademy说，“我们可以使用正当内容来沿着行轴定位整个网格。”整个网格是什么意思？是网格容器里的所有物品吗？

.container{
  display:grid;
  grid-template: repeat(2, 100px)/repeat(4, 1fr);
  border: 1px solid black;
  justify-content: start;
}
.header{
  background-color: skyblue;
  border: 1px solid orange;
}
.main{
  background-color: #C8FE2E;
  border: 1px solid orange;
}
.aside{
  background-color: #F6CEF5;
  border: 1px solid orange;
}
.footer{
  background-color: #A9F5F2;
  border: 1px solid orange;
}

html prettyprint-override"><div class="container">
  <div class="header">Header</div>
  <div class="main">Main</div>
  <div class="aside">Aside</div>
  <div class="footer">Footer</div>
</div>

Answer 1

如果您将列修复设置为100px，则没有什么可拉伸的！它的修复！如果你把你的列设置为1fr，你的项目占用了所有可用的空间，周围就没有空间来证明什么了。基于列定义，一些值（自然）没有影响。可能有些minmax（）是您的解决方案示例：

 grid-template-columns: repeat(auto-fill, minmax(150px, max-content));

请看这里：https://css-tricks.com/snippets/css/complete-guide-grid/（从网格开始的最佳描述）