CSS grid - grid-row Property
CSS grid-row is a shorthand property that determines the size and placement of a grid item within a grid row by specifying a line, a span, or relying on automatic placement. It defines the inline-start and inline-end edges of the grid area.
The grid-row property is a shorthand for the following individual grid-related properties:
Possible Values
auto − It automatically determines the position of the grid item within the grid layout or deafults to span of 1.
<custom-ident> − If there's a line labelled with '<custom-ident>-start' or '<custom-ident>-end,' the grid item will be positioned along that line.
<integer> && <custom-ident>? − If a name is given, only lines with that name are considered. If there are insufficient lines with that name, all grid lines are processed as if they have that name in order to determine the correct position. An <integer> value of 0 is not valid.
span && [ <integer> || <custom-ident> ] − When a name is specified as a custom-ident, only lines with that name get considered.If there insufficient lines with that name, we consider all the grid lines on the relevant side of the grid to have that name for counting purposes. If the <integer> is not specified, the default value is 1. Negative numbers or 0 are not allowed.
When using named grid areas, implicit lines are created. The grid-row: foo; specifies the start/end edge of the named region, unless explicitly specified by lines such as foo-start/foo-end.
Applies to
Grid items and absolutely-positioned boxes whose containing block is a grid container.
DOM Syntax
object.style.gridRow = "auto|<custom-ident>|<integer> && <custom-ident>?|span && [ <integer> || <custom-ident> ]";
CSS grid-row - auto Value
The following example demonstrates that grid-row: auto property automatically places the grid items in a same order in which they appear in the code −
<html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; width: 360px; color: white; text-align: center; background-color: lightgreen; } .grid-container > div { background-color: red; margin: 5px; padding: 5px; } .grid-item2 { grid-row: auto; } </style> </head> <body> <div class="grid-container"> <div >Grid item 1</div> <div class="grid-item2">Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> </div> </body> </html>
CSS grid-row - <custom-ident>
The grid-template-rows: [a] 50px [b] 50px; property creates two rows named a and b.
The following example demonstrates that grid-row: b property places the first grid item in the second row of grid −
<html> <head> <style> .grid-container { display: grid; grid-template-rows: [a] 50px [b] 50px; grid-template-columns: auto auto auto; background-color: lightgreen; padding: 5px; } .grid-container > div { background-color: red; border: 2px solid blue; padding: 10px; text-align: center; } .grid-item { grid-row: b; } </style> </head> <body> <div class="grid-container"> <div class="grid-item">Grid Item 1</div> <div>Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> </div> </body> </html>
CSS grid-row - <integer> && <custom-ident>?
The grid-template-rows: [a] 50px [b] 50px [a] 50px; property creates three rows named a and b.
The grid-row: 2 a property, indicates that the second grid item is placed at the second 'a' named line, which is the third grid line.
The following diagram demonstrates the column layout with line:
Here is an example −
<html> <head> <style> .grid-container { display: grid; grid-template-rows: [a] 50px [b] 50px [a] 50px; grid-template-columns: auto auto; background-color: lightgreen; padding: 5px; } .grid-container > div { background-color: red; border: 2px solid blue; padding: 10px; text-align: center; } .grid-item { grid-row: 2 a; /* The second `a` named line, which is the third grid line.*/ } </style> </head> <body> <div class="grid-container"> <div>Grid Item 1</div> <div class="grid-item">Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> </div> </body> </html>
CSS grid-column - span Value
The following example demonstartes that grid-row: 2 / span 2 property spans two rows starting from the second row −
<html> <head> <style> .grid-container { display: grid; grid-template-columns: auto auto auto; width: 360px; color: white; text-align: center; background-color: lightgreen; } .grid-container > div { background-color: red; margin: 5px; padding: 5px; } .grid-item2 { grid-row: 2 / span 2; } </style> </head> <body> <div class="grid-container"> <div>Grid item 1</div> <div class="grid-item2">Grid item 2</div> <div>Grid item 3</div> <div>Grid item 4</div> <div>Grid item 5</div> <div>Grid item 6</div> <div>Grid item 7</div> </div> </body> </html>
CSS grid-row - Related Properties
Following is the list of CSS properties related to grid-row property:
property | value |
---|---|
grid-row-start | Define the start position of a grid item within the grid rows. |
grid-row-end | Determine the rows where a grid item should end. |
To Continue Learning Please Login
Login with Google