What is the value order of the CSS `grid-area` shorthand when given four line values, and how does that order differ from margin's four-value shorthand?

middleshould knowfreq 42%

answer

row first, then column, twice
top, left, bottom, right
not clockwise like margin
the two pairs interleave
one identifier means a named area

basics

~20 s

grid-area takes row-start / column-start / row-end / column-end — effectively top, left, bottom, right. Margin's four values run clockwise from the top: top, right, bottom, left. The two orders differ, which is why grid-area's is so often written wrong.

solid answer

~40 s

grid-area is the shorthand for all four placement longhands, and its order is grid-row-start / grid-column-start / grid-row-end / grid-column-end. Read positionally that is top, left, bottom, right — the reverse rotation from margin and padding, which go clockwise top, right, bottom, left. Because both take four slash-free or slash-separated numbers, a transposed value produces a valid but wrong placement rather than an error, so it fails silently. grid-area also accepts a single identifier, as in grid-area: main, which is the named-area form. When you give fewer than four values, an omitted end value copies the corresponding start if that start is a custom identifier, and is otherwise auto. In review-heavy code many teams prefer writing grid-row and grid-column separately for exactly this reason.

`grid-area` is the shorthand for all four placement longhands, and its order is `grid-row-start / grid-column-start / grid-row-end / grid-column-end`. Read positionally that is top, left, bottom, right — the *reverse* rotation from margin and padding, which go clockwise top, right, bottom, left. Because both take four slash-free or slash-separated numbers, a transposed value produces a valid but wrong placement rather than an error, so it fails silently. `grid-area` also accepts a single identifier, as in `grid-area: main`, which is the named-area form. When you give fewer than four values, an omitted end value copies the corresponding start if that start is a custom identifier, and is otherwise `auto`. In review-heavy code many teams prefer writing `grid-row` and `grid-column` separately for exactly this reason.

code

css · 10 lines

css

.item { grid-area: 2 / 1 / 4 / 3; }

/* the same placement, written so it cannot be transposed */
.item {
  grid-row: 2 / 4;
  grid-column: 1 / 3;
}

/* the named form: all four longhands become 'main' */
.main { grid-area: main; }

go deeper

for a junior

Know that grid-area: main places an item in a named region, and that the four-value form exists. Recalling that rows come before columns is enough at this level.

for a middle

State the exact order — row-start, column-start, row-end, column-end — contrast it with margin's clockwise order, and explain how omitted values are filled in for names versus numbers.

for a senior

Expect to explain a layout bug caused by a transposed value and to argue for the grid-row plus grid-column pair as the reviewable form. Show you know each slot accepts spans and negative lines.

for a principal

Own the house convention: which placement form is allowed in hand-written CSS, which is reserved for generated output, and how that choice keeps layout mistakes visible in diffs rather than hidden behind valid syntax.

The four longhands

An item's grid area is fully described by four values:

grid-row-start
grid-column-start
grid-row-end
grid-column-end

grid-row bundles the first and third; grid-column bundles the second and fourth. grid-area bundles all four, and its order is exactly the list above.

css

.item { grid-area: 2 / 1 / 4 / 3; }
/* identical to: */
.item {
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-column-end: 3;
}
/* and to: */
.item { grid-row: 2 / 4; grid-column: 1 / 3; }

Note how the values interleave: the two row values are first and third, the two column values second and fourth. That interleaving is what makes the shorthand hard to read at a glance, because grid-row and grid-column each keep their pair adjacent while grid-area splits both pairs.

The mnemonic, and why it misleads

Positionally the order is top, left, bottom, right. Margin, padding, border-width and inset all use top, right, bottom, left — clockwise from the top. grid-area runs the other way around the box after the first value. Anyone who has internalised the clockwise habit from margin will transpose grid-area's second and fourth values, and the result is still a syntactically valid placement, so nothing complains: the item simply lands somewhere unintended. A transposition also often looks nearly right in a symmetric grid, which is how it survives review.

The named form

A single custom identifier is the area form:

css

.main { grid-area: main; }

This sets all four longhands to main. Because a named grid area automatically generates lines called main-start and main-end on both axes, the start values resolve to main-start and the end values to main-end — which is precisely the region drawn by grid-template-areas. It is the same shorthand doing the same job; only the value type differs.

Omitting values

With fewer than four values, the omitted ones are filled in by a rule worth knowing: if an end value is omitted and the corresponding start is a <custom-ident>, the end takes that same identifier; otherwise it is auto.

css

.a { grid-area: 2 / 1; }      /* ends are auto: one track each way */
.b { grid-area: main; }       /* all four are 'main' */
.c { grid-area: main / side; }/* row uses main-start/main-end, column side-start/side-end */

So names propagate and numbers do not — an asymmetry that surprises people who expect grid-area: 2 to mean row 2 through the end.

Practical guidance

Use grid-area when the value is a name; that form is unambiguous and reads well beside a grid-template-areas map. Prefer the grid-row plus grid-column pair when you are placing by line number, because each declaration keeps its axis's start and end together and cannot be transposed silently. Reserve the four-number form for generated CSS, where a machine is producing the values and human readability is not the constraint.

If you do read a four-number grid-area in a codebase, translate it to the pair form mentally before judging it: grid-area: r1 / c1 / r2 / c2 is grid-row: r1 / r2; grid-column: c1 / c2;, and any span or negative line that is legal in the longhands is legal in each slot too, so grid-area: 1 / 1 / -1 / span 2 is a perfectly ordinary value.

## The four longhands An item's grid area is fully described by four values: - `grid-row-start` - `grid-column-start` - `grid-row-end` - `grid-column-end` `grid-row` bundles the first and third; `grid-column` bundles the second and fourth. `grid-area` bundles all four, and its order is exactly the list above. ```css .item { grid-area: 2 / 1 / 4 / 3; } /* identical to: */ .item { grid-row-start: 2; grid-column-start: 1; grid-row-end: 4; grid-column-end: 3; } /* and to: */ .item { grid-row: 2 / 4; grid-column: 1 / 3; } ``` Note how the values interleave: the two row values are first and third, the two column values second and fourth. That interleaving is what makes the shorthand hard to read at a glance, because `grid-row` and `grid-column` each keep their pair adjacent while `grid-area` splits both pairs. ## The mnemonic, and why it misleads Positionally the order is top, left, bottom, right. Margin, padding, border-width and inset all use top, right, bottom, left — clockwise from the top. `grid-area` runs the other way around the box after the first value. Anyone who has internalised the clockwise habit from margin will transpose grid-area's second and fourth values, and the result is still a syntactically valid placement, so nothing complains: the item simply lands somewhere unintended. A transposition also often *looks* nearly right in a symmetric grid, which is how it survives review. ## The named form A single custom identifier is the area form: ```css .main { grid-area: main; } ``` This sets all four longhands to `main`. Because a named grid area automatically generates lines called `main-start` and `main-end` on both axes, the start values resolve to `main-start` and the end values to `main-end` — which is precisely the region drawn by `grid-template-areas`. It is the same shorthand doing the same job; only the value type differs. ## Omitting values With fewer than four values, the omitted ones are filled in by a rule worth knowing: if an end value is omitted and the corresponding start is a `<custom-ident>`, the end takes that same identifier; otherwise it is `auto`. ```css .a { grid-area: 2 / 1; } /* ends are auto: one track each way */ .b { grid-area: main; } /* all four are 'main' */ .c { grid-area: main / side; }/* row uses main-start/main-end, column side-start/side-end */ ``` So names propagate and numbers do not — an asymmetry that surprises people who expect `grid-area: 2` to mean row 2 through the end. ## Practical guidance Use `grid-area` when the value is a name; that form is unambiguous and reads well beside a `grid-template-areas` map. Prefer the `grid-row` plus `grid-column` pair when you are placing by line number, because each declaration keeps its axis's start and end together and cannot be transposed silently. Reserve the four-number form for generated CSS, where a machine is producing the values and human readability is not the constraint. If you do read a four-number `grid-area` in a codebase, translate it to the pair form mentally before judging it: `grid-area: r1 / c1 / r2 / c2` is `grid-row: r1 / r2; grid-column: c1 / c2;`, and any span or negative line that is legal in the longhands is legal in each slot too, so `grid-area: 1 / 1 / -1 / span 2` is a perfectly ordinary value.

What does `grid-area: 2 / 1` mean, with only two values given?
It sets `grid-row-start: 2` and `grid-column-start: 1`, leaving both end values as `auto`, which resolves to a span of one track on each axis. So the item sits in a single cell at row 2, column 1. The end values only inherit the start when the start is a custom identifier, never when it is a number.
Why do teams often ban the four-number `grid-area` form in review?
Because a transposed value is syntactically valid. Swapping the column and row slots produces a different but legal placement with no warning, and the wrong layout can look plausible in a symmetric grid. Writing `grid-row` and `grid-column` separately keeps each axis's pair adjacent, so a mistake is visible in the source.
Can a span or a negative line appear inside `grid-area`?
Yes. Each of the four slots accepts any single placement value the corresponding longhand accepts, so `grid-area: 1 / 1 / -1 / span 2` is valid: it starts at row line 1 and column line 1, ends at the last explicit row line, and covers two column tracks. The shorthand imposes no extra restrictions.

saying these in an interview costs you the question

Says grid-area follows margin's clockwise order
Reads the values as start pair then end pair
Thinks a missing end value always inherits the start
Believes grid-area only accepts area names
Assumes a transposed value throws an error

What is the value order of the CSS `grid-area` shorthand when given four line values, and how does that order differ from margin's four-value shorthand?

§ answer

basics

solid answer

code

§ go deeper

▾level notes4 levels

▾deep dive~3 min

The four longhands

The mnemonic, and why it misleads

The named form

Omitting values

Practical guidance

▾common follow-ups3 questions

▾red flags5 flags

§ context

▾related questions4 questions

▾related topics3 topics

The four longhands

The mnemonic, and why it misleads

The named form

Omitting values

Practical guidance

answer

go deeper

context