Html CSS网格验证内容不'；不要为所有的价值观而工作

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

.container{
显示：网格；
网格模板：重复（2，100px）/重复（4，1fr）；
边框：1px纯黑；
证明内容：开始；
}
.标题{
背景色：天蓝色；
边框：1px实心橙色；
}
梅因先生{
背景色：#C8FE2E；
边框：1px实心橙色；
}
.旁白{
背景色：#F6CEF5；
边框：1px实心橙色；
}
.页脚{
背景色：#A9F5F2；
边框：1px实心橙色；
}

标题
主要
在一边
页脚

如果将列修复设置为100px，则无需拉伸！修好了！ 如果将列设置为1F，则项目占用所有可用空间，周围就没有空间来证明某些内容。 根据列定义，某些值（自然）不起作用。 可以为您提供一些minmax（）解决方案吗 例如：

请看这里：

---

（从网格开始的最佳描述）

“我们可以使用对齐内容沿行轴定位整个网格。”意味着整个网格容器本身将水平对齐！为了更好地理解：。检查“调整内容”部分。

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