CSS Grid Justify-Content 不适用于所有值答案

【问题标题】：CSS Grid Justify-Content doesn't work for all valuesCSS Grid Justify-Content 不适用于所有值
【发布时间】：2021-01-29 12:08:49
【问题描述】：

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

.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;
}

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

【问题讨论】：

"我们可以使用 justify-content 沿行轴定位整个网格。"意味着整个网格容器本身将水平对齐！为了更好地理解：css-tricks.com/snippets/css/complete-guide-grid。检查 justify-content 部分。

标签： html css

【解决方案1】：

如果您将列固定设置为 100 像素，则没有什么可拉伸的！它的修复！如果您将列设置为 1fr，则您的项目会占用所有可用空间，则周围没有空间来证明某些东西是合理的。基于列定义，某些值（自然）没有效果。可能一些 minmax() 是你的解决方案示例：

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

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

【讨论】：