I've read through A complete guide to Grid, but still confused with the differences between two sets of container properties, namely the "justify/align-items" vs. "justify/align-content".
My confusion revolves around the claim made by the author that the "-content" set are there because
Sometimes the total size of your grid might be less than the size of
its grid container
I think this applies to both, not unique to the "-content" set.
Could someone help explain this? Preferably using some graphical illustration as examples.
Best Answer
Let's start with clarifying the terminology:
Grid Container
The grid container is the overall container for the grid and grid items. It establishes the grid formatting context (as opposed to another formatting context, such as flex or block).
Grid
The grid is a group of intersecting vertical and horizontal lines that divides the grid container’s space into grid areas, which are boxes that contain grid items.
Grid Items
Grid items are boxes in a grid container that represent in-flow content (i.e., content that is not absolutely positioned).
Here's an illustration from the W3C:
The
justify-contentandalign-contentproperties align the grid.The
justify-self,justify-items,align-selfandalign-itemsproperties align the grid items.With regard to the problem described in your question:
Well, you can see in the illustration that the grid is smaller than the grid container.
As a result, there is space remaining and the container is able to distribute this space to vertically center (
align-content: center) and right-align (justify-content: end) the grid.The extra space could also allow the grid to be spaced apart with values such as
space-around,space-betweenandspace-evenly.However, if the grid size equaled the container size, then there would be no free space, and
align-content/justify-contentwould have no effect.Here's more from the spec: