What does the CSS grid shorthand property set, and which longhands does it reset that you cannot even specify in it?

## What is in the set `grid` is a shorthand covering six properties: - explicit: `grid-template-rows`, `grid-template-columns`, `grid-template-areas` - implicit: `grid-auto-rows`, `grid-auto-columns`, `grid-auto-flow` CSS shorthands always reset every longhand they cover, whether or not the particular value you wrote mentions it. That rule is what makes `grid` sharper-edged than most shorthands, because half its set is unreachable from the syntax form people actually use. ## The explicit form ```css .layout { display: grid; grid: 80px 1fr 60px / 200px 1fr; /* rows / columns */ } ``` This is the `grid-template` syntax embedded in `grid`: rows before the slash, columns after, and the `grid-template-areas` string form is accepted here too. What it silently also does is set `grid-auto-flow: row`, `grid-auto-rows: auto` and `grid-auto-columns: auto`. ```css .layout { grid-auto-rows: 120px; /* wiped out by the next line */ grid: 80px 1fr / 200px 1fr; } ``` The cascade order inside the block is the whole story: the shorthand comes later, so it wins, and the implicit rows go back to `auto`. If a grid mysteriously reverts to content-sized implicit rows after someone "tidied up" the declarations into a shorthand, this is the cause. ## The implicit form The shorthand can also express the auto-track side, using the `auto-flow` keyword to mark which axis is the flowing one: ```css .rows { grid: auto-flow 120px / 200px 200px; } /* grid-auto-flow: row; grid-auto-rows: 120px; grid-template-columns: 200px 200px */ .cols { grid: 80px 80px / auto-flow 280px; } /* grid-template-rows: 80px 80px; grid-auto-flow: column; grid-auto-columns: 280px */ ``` Read the position of `auto-flow`: on the row side it means rows are the generated axis, on the column side it means columns are. The value after it is the auto track size, and `dense` may accompany the keyword. Crucially this is an either/or grammar. The side carrying `auto-flow` is the implicit axis, so that side cannot also be a template. You cannot say "three explicit rows, and any further rows are 120px" in one `grid` declaration — that genuinely needs `grid-template-rows` and `grid-auto-rows` written separately. ## grid-template versus grid `grid-template` is the narrower shorthand: the same rows/columns/areas syntax, but it covers only the three explicit longhands and therefore only resets those. If your intent is "define the explicit structure and leave the implicit settings alone", `grid-template` says exactly that and `grid` does not. ```css .safe { grid-auto-rows: 120px; grid-template: 80px 1fr / 200px 1fr; /* grid-auto-rows survives */ } ``` ## What is not in the set `gap` (and `row-gap` / `column-gap`) are not part of `grid`, so the shorthand neither sets nor resets them. Neither are the alignment properties. Older material sometimes claims `grid` resets gaps; it does not. ## The practical guidance Use `grid-template` or plain longhands for everyday layout code and reserve `grid` for the compact `auto-flow` form when it genuinely reads better. The reasoning is the same one that applies to every resetting shorthand: a declaration whose main effect is on properties it does not name is hard to review, and here the properties it silently resets are precisely the ones that control the implicit grid — the part of the layout that only misbehaves once real data arrives.