On a CSS Grid container, which single declaration centers every grid item both horizontally and vertically inside its own cell, and what two properties does it expand to?
answer
- one shorthand, two axes
- block axis value comes first
- A before J, alphabetical
- items inside cells, not tracks in container
- the three-line center-anything pattern
basics
~10 splace-items: center centers every grid item in both axes of its cell. It is the shorthand for align-items (block axis) then justify-items (inline axis), so it expands to align-items: center; justify-items: center.
solid answer
~40 s`place-items: center` on the grid container. It is the shorthand for `align-items` and `justify-items`, always written block axis first, inline axis second, and a single value is copied to both. `align-items: center` centers each item vertically inside its row track; `justify-items: center` centers it horizontally inside its column track. Because it sits on the container it applies to every item, and any individual item can opt out with `align-self`, `justify-self`, or the `place-self` shorthand. This is the whole of the classic "center anything" pattern — `display: grid; min-height: 100vh; place-items: center`. Note the distinction it hides: `place-items` centers items *inside their cells*, while `place-content` centers the whole group of *tracks* inside a larger container.
code
css · 10 lines.grid {
display: grid;
grid-template-columns: repeat(3, 120px);
min-height: 300px;
place-items: center; /* align-items: center; justify-items: center */
}
.grid .logo {
place-self: start end; /* align-self: start; justify-self: end */
}go deeper
Memorise that place-items: center is the one-line way to center grid items in both directions, and that it is align-items plus justify-items in that order.
Be ready to explain why the block-axis value comes first, that the initial normal behaves as stretch, and how place-self overrides the container default for a single item.
Show you reach for the grid centering pattern instead of absolute-position or transform hacks, and that you can say precisely when place-content rather than place-items is the property you actually want.
Frame it as a house convention: pick one canonical centering primitive, encode it in the design system's layout utilities, and keep ad-hoc transform-based centering out of the codebase.
## The two axes a grid aligns along A grid container has an inline axis (the direction text runs — horizontal in a normal left-to-right, top-to-bottom writing mode) and a block axis (the direction blocks stack — vertical in that same mode). Every grid alignment property belongs to exactly one of them: the `justify-*` family works on the **inline** axis, the `align-*` family works on the **block** axis. That single mapping is what you need to memorise; everything else follows. The spec says inline/block rather than horizontal/vertical because in a vertical writing mode the two swap, and the properties follow the writing mode rather than the screen. ## What place-items expands to `place-items` is a shorthand for exactly two properties, in this order: `align-items` first, `justify-items` second — block axis, then inline axis. ```css .grid { place-items: center; } /* align-items: center; justify-items: center */ .grid { place-items: end start; } /* align-items: end; justify-items: start */ ``` One value is copied into both axes; two values are read block-then-inline. Every `place-*` shorthand in CSS Box Alignment uses the same order — `place-content` is `align-content justify-content`, `place-self` is `align-self justify-self`. The mnemonic that survives interview pressure: **A before J**, alphabetical. ## What "inside its cell" means `align-items` and `justify-items` position each item inside the grid area it was placed into. Their initial value is `normal`, which for a grid item behaves as `stretch`: the item's box grows to fill the area in that axis. That is why an empty `<div>` in a grid cell appears to fill the cell even though you never gave it a width or height. The moment you write `center` (or `start` / `end`), stretching stops: the item shrinks back to its content size and is positioned at the requested point in the area. ## Overriding one item The container-level properties set a default for all items. An item overrides its own alignment with the `*-self` versions: ```css .grid { display: grid; place-items: center; } .grid .logo { place-self: start end; } /* align-self: start; justify-self: end */ ``` `place-self`, `align-self`, and `justify-self` are set on the **item**, not the container — putting `place-self` on the grid container aligns the container inside *its* parent, which is a common and confusing typo. ## place-items vs place-content This is the distinction that separates people who know Grid from people who know only Flexbox. `place-items` (i.e. `align-items` + `justify-items`) moves each **item within its track**. `place-content` (i.e. `align-content` + `justify-content`) moves **the tracks themselves within the container**, and only has anything to work with when the tracks are smaller than the container. If your columns are `1fr 1fr`, the tracks already consume all the free space, so `place-content` has no visible effect while `place-items` still works fine. ## The centering pattern ```css .page { display: grid; min-height: 100vh; place-items: center; } ``` Three declarations, no transforms, no absolute positioning, no known dimensions. With a single auto-sized item, `place-content: center` happens to land on the same pixels — the single implicit track shrinks to the item and is then centered — but the mechanisms differ, and they diverge as soon as there is more than one item or the tracks are sized. ## The Flexbox caveat `justify-items` has no effect in a flex container: flex distributes items along the main axis with `justify-content`, so there is no per-item inline alignment to set. That means `place-items: center` on a flex container effectively sets only `align-items: center`. In a grid container both halves do real work, which is exactly why the shorthand is worth reaching for here. ## Common mistakes Reaching for `text-align: center` (it centers inline content *inside* the item, not the item inside its cell); writing the two values inline-first; expecting `vertical-align` to do anything to a grid item (it does not — it is for inline-level and table-cell content); and setting `place-items` on the item instead of `place-self`.
- If you set place-items: center, what happens to the default stretching of grid items?It stops in both axes. The initial value `normal` behaves as `stretch` for grid items, so they fill their area. `center` is not a stretch value, so each item shrinks back to its content size (its intrinsic width and height) and is then positioned in the middle of its grid area. You often notice this as backgrounds and borders suddenly hugging the text.
- What is the difference between place-items: center and place-content: center on a grid container?`place-items` aligns each item inside its own grid area; `place-content` aligns the whole set of tracks inside the grid container, and only does anything when the tracks are collectively smaller than the container. With `grid-template-columns: 1fr 1fr` the tracks already fill the width, so `place-content` is invisible while `place-items` still centers each item in its column.
- How would you center only one item of a grid without touching the others?Set `place-self: center` on that item. The `*-self` properties are set on the grid item and override whatever the container's `place-items` established, for that item only. Setting `place-items` on the item does nothing useful — it would only affect that element's own children if it were itself a grid container.
saying these in an interview costs you the question
- Says text-align: center centers the item in its cell
- Reads place-items values inline-axis first
- Confuses place-items with place-content
- Puts place-self on the container instead of the item
- Thinks vertical-align: middle works on grid items