我正在学习CSS网格属性。我被困在正当内容上了。Start/end/center等可以，但是:stretch不行。
我已经尝试改变属性，如高，宽度等在父容器，谷歌也不知道。
* {
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;
/*those values are exactly the same , like in fcc tutorial*/
justify-content: stretch;
/* nothing happens*/
}<!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>我已经尝试改变属性，如高，宽度等在父容器，谷歌也不知道。
我想让子框沿着父框的x轴伸展到全宽度
fcc教程截图
如果您定义auto大小，您可以看到拉伸的效果。还要注意，stretch是默认值。
从规格:
11.8。拉伸自动轨道
此步骤通过在它们之间平均划分任何剩余的正的，确定的自由空间来扩展具有自动最大轨道大小功能的轨道。如果可用空间不确定，但网格容器有确定的最小宽度/高度，则使用该大小来计算此步骤的可用空间。
* {
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-columns: auto auto;
}<div class="container" style="justify-content: start;">
<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>
<div class="container" style="justify-content: stretch;">
<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>