CSS grid-row 속성

정의와 사용법

grid-row 속성은 그리드 항목의 크기와 그리드 레이아웃 내의 위치를 정의하며, 다음 속성의 약자 속성입니다:

다른 것을 참고하십시오:

CSS 강의:CSS 그리드 레이아웃

예제

예제 1

"item1"이 행 1에서 시작하여 두 행을 건너쳐 표시됩니다:

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

직접 테스트해 보세요

예제 2

행선 값을 사용하여 필요한 행 수 대신에 사용할 수 있습니다:

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

직접 테스트해 보세요

CSS 문법

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

속성 값

설명
grid-row-start 항목을 표시하기 시작하는 행을 정합니다.
grid-row-end 항목이 표시되는 행선을 정하는 데 사용되거나, 몇 행을 건너쳐 표시할지 정합니다.

기술 세부 사항

기본 값: auto / auto
thừa kế: 아니요
애니메이션 제작: 지원됩니다. 참고하십시오:애니메이션 관련 속성
버전: CSS Grid Layout Module Level 1
JavaScript 문법: object.style.gridRow="2 / span 2"

브라우저 지원

표의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

크롬 IE / 엣지 파이어폭스 사파리 오페라
57 16 52 10 44