CSS 그리드 자동 플로우 속성

정의와 사용법

grid-auto-flow 속성은 자동 배치하는 아이템이 그리드에 어떻게 삽입되는지 제어합니다.

자동 배치하는 아이템을 절대로 행별로 삽입합니다:

.grid-container {
  display: grid;
  grid-auto-flow: column;
}

모든 공간을 채우기 위해 "dense" 값을 추가합니다:

.grid-container {
  display: grid;
  grid-auto-flow: row dense;
}

grid-auto-flow: row|column|dense|row dense|column dense;

값	설명
row	기본 값. 각 행을 채우며 아이템을 배치합니다.
column	각 열을 채우며 아이템을 배치합니다.
dense	그리드 내의 모든 공간을 채우기 위해 아이템을 배치합니다.
row dense	각 행을 채우며 아이템을 배치하고, 그리드 내의 모든 공간을 채우도록 합니다.
column dense	각 열을 채우며 아이템을 배치하고, 그리드 내의 모든 공간을 채우도록 합니다.

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

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

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