Home CSS Properties grid-row-start CSS grid-row-start Property Definition
Definition and Usage The grid-row-start property sets where a grid item begins on the row axis. It picks a grid line, a named line, or a span, which becomes the start edge of the item’s grid area.
The initial value is auto (auto-placement). Pair it with grid-row-endgrid-rowgrid-column-start
Standard-track. Not deprecated and not experimental. Baseline widely available with CSS Grid.
Syntax
CSS Syntax grid-row-start: auto | <integer> | span <integer> | <custom-ident> | initial | inherit ;
Most beginners use a line number (2), span 2, or auto. Line 0 is invalid.
Values
Property Values Value Description Try it autoDefault. Auto-placement picks the start line <integer>Start at that row line. Negative counts from the end (-1 is the last line) span <integer>Span that many row tracks from the end edge <custom-ident>Start at a named grid line (or area -start line) initialResets to auto inheritTakes the parent value (not inherited by default)
Approach
How to Use grid-row-start Build a grid, then pin an item to a row line.
Set display: gridgrid-template-rows Target a grid item (not the container). Set grid-row-start to a line number, span, or name. Optionally set grid-row-endgrid-row Goal Typical value Start on row track 2 grid-row-start: 2Start at the last line grid-row-start: -1Cover two rows (with end) grid-row-start: span 2
Try it
Live Preview A 3×3 grid. Only item A changes grid-row-start.
Code
CSS Examples Each snippet focuses on grid-row-start. A small grid scaffold makes the placement visible. Use Try It Yourself for a live editor.
1. Line number 2. Negative line 3. span Example 1 — Start at Row Line 2 Pin the item so its top edge begins on line 2.
<style>
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 40px 40px 40px;
}
.item {
grid-row-start: 2;
}
</style>
<div class="grid">
<div class="item">A</div>
<div>B</div>
<div>C</div>
</div> How It Works Build rows. Three explicit row tracks create lines 1–4.Set the start line. grid-row-start: 2 puts A’s top on line 2.Default end. Without grid-row-end, the item spans one track (to line 3).Only on the item. The property belongs on the child, not the grid container.Example 2 — Start from the End Negative lines count backward from the end of the explicit grid.
<style>
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 40px 40px 40px;
}
.item {
grid-row-start: -2;
}
</style>
<div class="grid">
<div class="item">A</div>
<div>B</div>
<div>C</div>
</div> How It Works Count from the end. With three rows, line -1 is the last line; -2 is one line before that.Start at -2. A begins on the line above the final row track.Handy for footers. Negative lines stay attached to the explicit grid end.0 is invalid.Example 3 — Span Two Rows span 2 makes the item cover two row tracks.
<style>
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 40px 40px 40px;
}
.item {
grid-row-start: span 2;
}
</style>
<div class="grid">
<div class="item">A</div>
<div>B</div>
<div>C</div>
</div> How It Works Use span. The start edge is set relative to the end edge.Cover two tracks. span 2 makes A two rows tall.Placement still auto. Without a fixed end line, auto-placement chooses where the span sits.Shorthand option. grid-row: span 2 is a common shorter form.Edge Cases & Pitfalls Think in grid lines , not row indexes. Invalid values are ignored.
lines Lines ≠ track numbers Three row tracks create four horizontal lines (1–4). grid-row-start: 2 starts at the second line, not “row index 2” in every mental model.
zero 0 is invalidUse a non-zero integer. Zero does not place the item.
target Applies to grid items Set it on children of a grid container, not on the container itself (unless that box is also a grid item of a parent grid).
overlap Items can overlap Explicit line placement can stack items in the same cells. That is allowed; control stacking with z-index if needed.
shorthand grid-row can replace both endsgrid-row: 2 / 4grid-row-start in the same rule cascade when it wins.
Compatibility
Browser Support grid-row-start is a browser style property for CSS Grid. Node.js, Deno, and Bun do not apply it.
✓ Baseline · Widely available
grid-row-start Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+, Opera, Samsung Internet 6+. Not supported in Internet Explorer.
Google Chrome 57+
Full support
Mozilla Firefox 52+
Full support
Apple Safari 10.1+
Full support
Microsoft Edge 16+
Full support
Opera 44+
Full support
Samsung Internet 6+
Full support
Internet Explorer All
Not supported grid-row-start Supported with modern CSS Grid
Bottom line: Safe for modern grid layouts. No prefix is required in current browsers.
Remember
Key Takeaways Role: set the starting row line of a grid item.
Default: auto — let auto-placement decide.
Common values: line numbers, negatives from the end, and span n.
Shorthand: grid-row sets start and end together.
One line: grid-row-start pins a grid item’s top edge to a chosen row line.
Frequently Asked Questions What does grid-row-start do? It sets the row grid line where a grid item begins — the top edge of its grid area in a horizontal writing mode.
What is the default value? auto. The item follows grid auto-placement instead of a fixed start line.
What does grid-row-start: 2 mean? The item’s top edge starts at row line 2, which is the line between the first and second row tracks.
What does span 2 do? The item spans two row tracks from its end edge backward (or with an end line) so it covers two rows.
How is it different from grid-row? grid-row-start sets only the start line. grid-row is shorthand for both grid-row-start and grid-row-end.
Which browsers support grid-row-start? It is Baseline widely available: Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+. It is a browser style property, not a Node.js feature.
About the author Developer, cloud engineer, and technical writer
I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.
8 people found this page helpful
