Grid row start
grid-row-start
Use this property to define the element's top edge with respect to the grid system.
Definitions
Refer to these definitions to better understand how the property values are used.
Grid lines
Each reference to a grid line refers to the imaginary line on either side of grid cells.
For a layouts with N rows, there are N+1 horizontal grid lines — one at the top, one between each row, and one at the bottom.
For a layouts with M columns, there are M+1 vertical grid lines — one at the left edge, one between each column, and one at the right edge.
Grid lines are numbered starting at 1. For rows, the topmost line is 1 and the bottommost line is N+1. For columns, the leftmost line is 1 and the rightmost line is M+1. *
* Arabic, Hebrew and other left-to-right writing systems, reverse everything.Grid line aliases
For clarity and ease of use, each grid line can be aliased with an arbitrary name. That alias can be used with grid-row-start, grid-row-end, grid-column-start and grid-column-end property values.
Grid line aliases are defined when specifying grid-template-rows, grid-template-columns, and grid-template-areas.
In addition, when a grid line alias is declared by the user within a grid-template-areas definition, the browser implicitly defines two other names that can be used in those start/end properties. For example, if a grid-template-areas defines an area named foo:
| generated name | property | interpretation |
|---|---|---|
| 'foo-start' | grid-row-start | The topmost line of the area |
| 'foo-start' | grid-column-start | The leftmost line of the area |
| 'foo-end' | grid-row-end | The bottommost line of the area |
| 'foo-end' | grid-column-end | The rightmost line of the area |
Property values
Specify a single value for the top edge of this element with respect to its grid container. Use one of these methods:
| num | From 1 to N, where there are N fixed rows in the grid |
| alias | Use an alias-name declared in grid-template-rows |
| alias-start | Use an alias-start-name implicitly declared within grid-template-areas |
| alias num | Starting at (alias-name + num) |
| span num | Starting at (grid-row-end - num) * |
| span alias num | Starting at (grid-row-end - (alias-name + num)) * |
| 'auto' | Use this keyword for auto-placement of the element within a grid that has flexible rows |
* The span keyword can only be used here if it is not used by grid-row-end.
Examples
/* number from 1 to N */
grid-row-start: 1;
/* grid line alias */
grid-row-start: foo;
/* grid line alias-start */
grid-row-start: foo-start;
/* alias num */
grid-row-start: foo 3;
/* span num */
grid-row-start: span 3;
/* span alias num */
grid-row-start: span foo 3;