CSS Grid中justify-content: stretch属性不生效问题求助

问题描述 #

学习CSS Grid时碰到justify-content属性的问题：start/end/center这些值都能正常生效，但stretch完全没作用。调整过父容器的height、width属性，查了资料也没解决，想要子元素沿父容器X轴拉伸至满宽，代码如下：

CSS代码 #

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 40px;
  min-width: 100vh;
  min-height: 100vh;
}

[class^="box-"] {
  background-color: skyblue;
  display: grid;
  place-items: center;
}

.container {
  display: grid;
  gap: 50px;
  height: 100vh;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px;
  justify-content: stretch; /* 无效果 */
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="container">
    <div class="box-1"> A </div>
    <div class="box-2"> B </div>
    <div class="box-3"> C </div>
    <div class="box-4"> D </div>
  </div>
</body>

</html>

问题原因 #

justify-content: stretch的生效前提是网格轨道的宽度没有被固定值（比如你写的200px）限制。你给grid-template-columns设置了固定的200px 200px，轨道宽度已经被锁死，stretch根本没法发挥作用——它只能在轨道宽度为auto时，把轨道拉伸填满容器的可用空间。

解决方法 #

要实现子元素沿X轴满宽，有两种实用方案：

方案1：用fr单位替代固定宽度 #

把grid-template-columns的固定值换成fr（网格剩余空间分配单位），轨道会自动填满容器宽度，不需要justify-content：

.container {
  display: grid;
  gap: 50px;
  height: 100vh;
  grid-template-rows: 200px 200px;
  grid-template-columns: 1fr 1fr; /* 替换200px为1fr */
}

方案2：保留auto轨道宽度，配合justify-content: stretch #

如果需要轨道宽度的灵活性，把grid-template-columns设为auto auto，此时justify-content: stretch就能生效：

.container {
  display: grid;
  gap: 50px;
  height: 100vh;
  grid-template-rows: 200px 200px;
  grid-template-columns: auto auto; /* 设为auto */
  justify-content: stretch;
}

补充提示 #

• justify-content控制的是整个网格容器内轨道的对齐方式，不是直接控制子元素宽度；子元素默认会填满所在轨道，所以轨道被拉伸后，子元素自然就满宽了。
• 你代码里body的min-width: 100vh是笔误，应该改成min-width: 100vw，不过这不是导致问题的核心原因。

内容的提问来源于stack exchange，提问作者Kabrax