CSS Grid justify-content is confusing.

You set it and nothing changes. You realize it only works if the grid tracks don't fill the container. You mix it up with align-content .

Let's break down how alignment actually works in CSS Grid.

The Core Issue: Empty Space

Both justify-content and align-content do the same thing: they distribute empty space in a container.

If your grid tracks take up 100% of the container's width or height, there is no empty space. Therefore, these properties do nothing.

You only see the effect when your grid tracks are smaller than the container.

Justify-Content (The Horizontal Axis)

justify-content aligns the grid columns (tracks) along the inline (horizontal) axis.

.container { display : grid ; grid-template-columns : 100px 100px ; /* Only 200px wide */ width : 400px ; /* Container is 400px wide */ justify-content : center ; }

Enter fullscreen mode

Exit fullscreen mode

Because there is 200px of empty space, justify-content: center pushes the columns to the…