Is justify-content: stretch not supported for css grid in the latest browsers?

Question

Both MDN and csstricks mention that we can have justify-content: stretch to expand the tracks of a grid to fill its grid-container. While other property values such as justify-content: start; and justify-content: centre; work as expected, the former doesn't work in both chrome and firefox. Below is demo to show that:

.grid-container {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.grid-container.stretch {
  background-color: #9996f3;
  justify-content: stretch; /*no effect!!!*/
}

<h3>justify-content: space-evenly </h3>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

<h3>justify-content: stretch <small>(Doesn't work) </small></h3>

<div class="grid-container stretch">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

The expected behaviour for justify-content: stretch as suggested by csstrick.com should be like the following:

Question: Is it a browser support issue? MDN says its supported for all major browsers. What am I missing here

Answer 1

As I understand it, stretch will alter the width of any auto sized element, but not ones of fixed size. And the alteration will be such that each of these resized elements gets an equal amount of space.

Here's what MDN says:

If the combined size of the items along the main axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.

So in this snippet the 50px is changed to auto in the grid layout for two of them we get two of them stretched in the second container:

.grid-container {
  display: grid;
  justify-content: space-evenly;
  grid-template-columns: auto 50px auto; /*Changed from 50px for all*/
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.grid-container.stretch {
  background-color: #9996f3;
  justify-content: stretch; /*no effect!!!*/
}

<h3>justify-content: space-evenly </h3>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>

<h3>justify-content: stretch <small>Allocates extra space among the auto sized elements</small></h3>

<div class="grid-container stretch">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
</div>