In this section, we will learn what the grid-row-start property is and how to use it in CSS.
Click here to run the example of grid-row-start property.
CSS grid-row-start Property Definition and Usage
After we’ve created our CSS grid, by default, grid-items will be automatically positioned on each cell of that grid. But this is the default behavior and we can decide where on the grid we want each grid-item to be positioned.
Now, using the `grid-row-start` property, we can declare the line number or line name that the top edge of the target item should be placed on.
Also, there’s another property named `grid-row-end` which declares the line number or line name that the bottom edge of the target item should be placed on.
Note: These two elements usually come together.
CSS grid-row-start Property Syntax
grid-column-start: auto|span n|row-line-name| row-line-number;
CSS grid-row-start Property Value
- start-row-line-number: We know that a grid has multiple horizontal lines, right? So using this value, we can determine what line number the top edge of the target item should be placed on.
- start-row-line-name: As explained in `grid-template-columns` section, when creating a grid, we can actually name the lines of that grid. So “start-row-line-name” is actually the name of the grid’s line that we want the top edge of the target item to be placed on.
Also, there’s a keyword named “span” which can be used as the value of this property. Here’s the syntax:
grid-row-start: span number-of-tracks;
- span: this is the keyword, and that means a number of tracks.
- Number-of-track: this is the number of tracks we want the grid-item to expand on.
Example= grid-row-start: span 3; // means expand the target item in 3 rows.
Note: the value “auto” is the default value. This means the item will span on one column.
Example: grid-row-start property in CSS
See the Pen grid-row-start property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.