CSS grid-row attribute


The following example sets "item1" Span two lines ::

.item1 { grid-row: 1 / span 2 ; }

Give it a try »

Browser support

The number in the table indicates the first browser version number that supports this attribute .

grid-row 57 16 52 10 44

Attribute definition and instructions

grid-row Attributes define the start and end positions of grid element rows .

be careful : grid-row yes grid-row-start and grid-row-end Short for property .

We can refer to the line number to set the grid element , You can also use keywords "span" To define the number of lines that the element will span .

Default value : auto
inherit : no
Animation : support . Read about animatable Give it a try
edition : CSS Grid layout module Level 1
JavaScript Grammar : object.style.gridRow="2 / span 2" Give it a try


grid-row: grid-row-start / grid-row-end;

Worth Describe
grid-row-start Specifies which line to start displaying grid elements .
grid-row-end Specifies the row that stops displaying grid elements , Or how many lines to span .

More examples

The following example sets "item1" In the first 1 OK, start , In the first 4 End before line :


.item1 { grid-row: 1 / 4 ; }

Give it a try »

Related articles

CSS course : CSS Grid layout