In a CSS Grid container, what is the difference between justify-items and justify-content?

## Two different boxes, one axis Grid alignment is easy once you accept that there are two nested things to align along each axis, not one: 1. The **tracks** (the rows and columns) sit inside the grid container's content box. 2. Each **item** sits inside the grid area it was placed into. `justify-content` and `align-content` handle step 1. `justify-items` and `align-items` handle step 2. Both pairs are split by axis the same way: `justify-*` is the inline axis (horizontal in a left-to-right, top-to-bottom writing mode), `align-*` is the block axis (vertical there). So the full container-level matrix is: | | inline axis | block axis | |---|---|---| | tracks inside container | `justify-content` | `align-content` | | item inside its area | `justify-items` | `align-items` | and each item can override its own row of that table with `justify-self` / `align-self`. ## justify-items: the item inside its area ```css .grid { display: grid; grid-template-columns: repeat(3, 200px); justify-items: start; } ``` Each item now sits at the inline-start edge of its 200px column, sized to its content instead of filling the track. The tracks have not moved — they are still three 200px columns in the same place. Legal values are the positional ones (`start`, `end`, `center`, `left`, `right`, `flex-start`/`flex-end` as legacy aliases), plus `stretch` and `normal`, plus baseline alignment. Notably it takes **no** distribution values: `space-between` on `justify-items` is invalid, because a single item inside a single area has nothing to distribute against. ## justify-content: the tracks inside the container ```css .grid { display: grid; grid-template-columns: repeat(3, 200px); /* 600px of track */ width: 900px; /* 300px of free space */ justify-content: space-between; } ``` Here the three tracks total 600px inside a 900px container, leaving 300px of free space. `justify-content` decides what happens to that 300px: `start` puts it all after the tracks, `end` before, `center` splits it evenly on both sides, `space-between` puts 150px between each adjacent pair with none at the edges, `space-around` gives each track equal space on both sides (so edge gaps are half the internal ones), `space-evenly` makes all gaps equal. Because it moves the tracks, it moves every item in them with the track. ## The free-space rule that explains the confusion `justify-content` needs leftover space to do anything. The overwhelmingly common reason it "does nothing" is that the track sizing already ate the space — `1fr` columns, `auto` columns that expand, or `repeat(auto-fit, minmax(...))`. `fr` is defined as a share of the *free space*, so once you use it there is, by construction, none left for content alignment. If you want gaps between tracks, size the tracks intrinsically (fixed widths, `max-content`, `min-content`) and then `justify-content` becomes meaningful. Conversely, `justify-items` does not care about container free space at all — it works inside whatever the track ended up being. ## The block-axis twin, and the tall-container case The same story runs vertically. A container with `height: 100vh` and two `auto` rows leaves a large block-axis free space. `align-items: center` will center each item **inside its own row**, which is not what you want if the rows themselves are stuck at the top — you want `align-content: center` to move the row group into the middle of the container. Getting this backwards is the classic "I set align-items: center and nothing moved" bug report. Note one asymmetry: the initial `normal` behaves as `stretch` for `align-content`/`justify-content` too, and stretching distributes leftover space into **auto-sized tracks** — so with `grid-template-rows: auto auto` and a tall container, the rows themselves grow. Tracks sized with a fixed length or `fr` do not participate. ## Shorthands and per-item overrides `place-content` is `align-content justify-content`; `place-items` is `align-items justify-items`; `place-self` is `align-self justify-self` — always block axis first. There is deliberately **no** self-version of the content properties: content alignment is a property of the container's track layout, so a single item cannot opt out of it. ## Why Flexbox intuition misfires In a flex container, `justify-content` distributes the items themselves along the main axis and `justify-items` is ignored entirely — there is only one box to align, so flex users learn one property where grid has two. Carrying that habit into grid produces exactly the two failure modes above: reaching for `justify-content` when you meant per-item alignment, and reaching for `align-items` when you meant to move the whole track group.