justify-content works differently in Flex and Grid layouts

Question

I'm wondering why using justify-content

the grid item takes the whole space

available instead of that used in the grid.

With justify-content: https://codepen.io/whisher/pen/JOpYdp

Without: https://codepen.io/whisher/pen/pdajjb

.wrapper {
  background-color: red;
  width: 500px;
  height: 400px;
  border: 2px solid #CCC;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 80px);
  grid-template-rows: repeat(3,100px);
  align-content: space-around;
  justify-content: space-between;
}

I mean I expect like the same of using flex

https://codepen.io/whisher/pen/YEewaW

Michael Benjamin · Accepted Answer · 2017-11-20T11:59:46.237

In flex layout, the justify-content property distributes free space in the container between or around flex items (depending on the value).

8.2. Axis Alignment: the justify-content property

The justify-content property aligns flex items along the main axis of the current line of the flex container. ... Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

In grid layout, the justify-content property distributes free space in the container between or around grid columns (depending on the value).

Note the difference with flex: Here, justify-content aligns grid columns, not grid items.

10.5. Aligning the Grid: the justify-content and align-content properties

If the grid’s outer edges do not correspond to the grid container’s content edges (for example, if no columns are flex-sized), the grid tracks are aligned within the content box according to the justify-content and align-content properties on the grid container.

Here are the grid column tracks in your layout...

...without justify-content: space-between: