CSS grid-row-end 속성

정의와 사용법

grid-row-end 속성은 항목이 얼마나 많은 행을 걸쳐갈지 또는 항목이 어느 행선에서 끝날지 정의합니다.

페이지 끝의 예제를 참조하세요.

추가로 참고:

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

예제

예제 1

"item1"을 세 행에 걸쳐서 만들기:

.item1 {
  grid-row-end: span 3;
}

자신의 손으로 해보세요

예제 2

행선 값으로 걸쳐질 행 수 대신 사용할 수 있습니다:

.item1 {
  grid-row-end: 3;
}

자신의 손으로 해보세요

CSS 문법

grid-row-end: auto|row-line|span n;

속성 값

값 설명
auto 기본 값. 항목은 한 행을 걸쳐집니다.
span n 항목이 걸쳐질 행 수를 정의합니다.
column-line 어디서 끝나는 행을 나타냅니다.

기술 세부 사항

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

브라우저 지원

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

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