CSS grid-template-rows 속성

정의와 사용법

grid-template-rows는 그리드 레이아웃의 행 수(높이)를 정의합니다.

값은 공백으로 구분된 목록으로, 각 값은 해당 행의 높이를 지정합니다.

다른 것도 참고하세요:

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

CSS 참고 매뉴얼:grid-columns 속성

CSS 참고 매뉴얼:grid-template 속성

예제

row-size(높이)를 정의합니다:

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

직접 테스트해 보세요

CSS 문법

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

속성 값

값 설명
none 크기를 설정하지 않았습니다. 필요할 때 행을 생성합니다.
auto 행의 크기는 컨테이너의 크기와 행 내 요소 내용의 크기에 따라 결정됩니다.
max-content 행 내의 가장 큰 요소에 따라 각 행의 크기를 설정합니다.
min-content 행 내의 가장 작은 요소에 따라 각 행의 크기를 설정합니다.
length 행의 크기를 설정하려면 유효한 길이 값을 사용하여 설정합니다. 참고:길이 단위.

기술 세부 사항

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

브라우저 지원

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

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44