CSS grid-row 속성
- 이전 페이지 grid-gap
- 다음 페이지 grid-row-end
정의와 사용법
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 |
- 이전 페이지 grid-gap
- 다음 페이지 grid-row-end