Grid 자동 흐름 설정

사용법

그리드 자동 흐름 설정

그리드에 명시적으로 배치(레이아웃) 되지 않은 아이템이 있을 경우, 자동 배치 알고리즘이 실행되어 자동으로 배치 되도록 설정할 수 있습니다. 속성 값에 따라 자동 배치 알고리즘 작동 방식이 달라집니다.

속성	값	비고
grid-auto-flow	row	기본 값
	column
	dense

값

값	설명
row	각 행을 차례로 채우고 필요에 따라 새 행을 추가하는 자동 배치 알고리즘
column	각 열을 차례로 채우고 필요에 따라 새 열을 추가하는 자동 배치 알고리즘
dense	배치 중 나중에 크기가 작은 아이템이 존재할 경우, 그리드 영역 앞부분의 남은 공간에 자동 배치하는 알고리즘

예시

HTML 마크업

<section class="grid-container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

CSS 스타일

5행 2열 그리드를 생성한 후, 자동 배치 알고리즘 값을 row로 설정합니다. (기본 값이라 생략해도 무방)

.grid-container {
  display: grid;
  grid-template: repeat(5, 60px) / repeat(2, 30px);
  grid-auto-flow: row;
}

.item-a, .item-e 두 아이템에 행/열 배치를 설정합니다.

.item-a {
  grid-row: 1 / 3;
  grid-column: 1;
}

.item-e {
  grid-row: 1 / 3;
  grid-column: 5;
}

결과는 다음과 같이 그려집니다.

grid-auto-flow 값이 행(row)이기에 별도로 배치 설정을 하지 않은 .item-b, .item-c, .item-d 는 행 축에 따라 자동 배치됩니다.

자동 배치 알고리즘 설정을 행에서 열로 변경하면, 배치 설정이 되지 않은 아이템은 모두 열에 맞춰 자동 배치됩니다.

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

결과를 살펴보세요. 별도로 배치 설정을 하지 않은 .item-b, .item-c, .item-d는 열 축에 따라 자동 배치됩니다.

실습

레퍼런스

CSS Grid Layout Module Level 1

w3.org/TR/css-grid-1/#grid-auto-flow-property