CSS Grid justify-content: stretch desn`t work-CodePudding

I`m learning CSS Grid properties. And i am stuck on justify-content. start / end/ center etc works fine but : stretch dont.

I have tried changing properties like high,width etc in parent container, google also doesn`t know.

* {
  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 >
    <div > A </div>
    <div > B </div>
    <div > C </div>
    <div > D </div>
  </div>
</body>

</html>

I have tried changing properties like high,width etc in parent container, google also doesn`t know.

I want children boxes to strech along x axis of parent to full width size

Screen from fcc tutorial

CodePudding user response：

You can see the effect of stretch if you define an auto sizing. Also note that stretch is the default value.

From the specification:

11.8. Stretch auto Tracks

This step expands tracks that have an auto max track sizing function by dividing any remaining positive, definite free space equally amongst them. If the free space is indefinite, but the grid container has a definite min-width/height, use that size to calculate the free space for this step instead.

* {
  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  style="justify-content: start;">
  <div > A </div>
  <div > B </div>
  <div > C </div>
  <div > D </div>
</div>

<div  style="justify-content: stretch;">
  <div > A </div>
  <div > B </div>
  <div > C </div>
  <div > D </div>
</div>