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
는 열 축에 따라 자동 배치됩니다.

실습
레퍼런스

Last updated