CSS 그리드 자동 행 속성

정의와 사용법

grid-auto-rows 속성은 그리드 컨테이너 안의 행의 크기를 설정합니다.

이 속성은 크기를 설정하지 않은 행에만 영향을 미칩니다.

또한 참고하십시오:

CSS 가이드:CSS 그리드 레이아웃

CSS 참조 가이드:grid-auto-columns 속성

예제

그리드 안의 행의 기본 크기를 설정합니다:

.grid-container {
  display: grid;
  grid-auto-rows: 150px;
}

본인이 직접 테스트해 보세요

CSS 문법

grid-auto-rows: auto|max-content|min-content|length;

속성 값

값 설명
auto 기본 값. 행 안의 가장 큰 요소의 크기에 따라 행의 크기를 결정합니다.
max-content 행 안의 가장 큰 요소에 따라 행의 크기를 설정합니다.
min-content 행 안의 가장 큰 요소에 따라 행의 크기를 설정합니다.
length 행의 크기를 설정하여 유효한 길이 값을 사용합니다. 참고:길이 단위。

기술 세부 사항

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

브라우저 지원

표格에 기재된 숫자는 이 속성을 완전히 지원하는 최초 브라우저 버전을 나타냅니다。

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