CSS Grid 레이아웃에서 grid-auto-flow 속성은 명시적으로 위치가 지정되지 않은 자동 배치(auto-placed) 항목들이 그리드 안에 어떤 방향으로 흐르며 배치될지를 결정합니다. 이 속성을 활용하면 그리드 항목의 배치 순서와 방향을 손쉽게 제어할 수 있습니다.
grid-auto-flow의 주요 값
- row (기본값): 항목이 각 행을 차례로 채우며, 공간이 부족하면 새로운 행을 추가합니다.
- column: 항목이 각 열을 차례로 채우며, 공간이 부족하면 새로운 열을 추가합니다.
- row dense: 행 방향으로 배치하되, 빈 공간이 있으면 앞선 항목으로 되돌아가 빈자리를 채웁니다.
- column dense: 열 방향으로 배치하되, 빈 공간을 우선적으로 메꿉니다.
예제 코드
다음 코드는 grid-auto-flow 속성에 column 값을 적용하여 항목들이 세로 방향(열 기준)으로 자동 배치되도록 구현한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-auto-columns: 50px;
grid-auto-flow: column;
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.container > div {
background-color: yellow;
text-align: center;
padding: 10px 0;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="ele1">1</div>
<div class="ele2">2</div>
<div class="ele3">3</div>
<div class="ele4">4</div>
<div class="ele5">5</div>
<div class="ele6">6</div>
</div>
</body>
</html>코드 설명
위 예제에서 컨테이너 요소에 display: grid를 설정해 그리드 레이아웃을 활성화했습니다. grid-auto-columns: 50px는 자동 생성되는 열의 너비를 50px로 지정하고, grid-auto-flow: column은 항목 1부터 6까지가 왼쪽에서 오른쪽으로 열 단위로 배치되도록 흐름 방향을 변경합니다. grid-gap: 10px은 항목 사이에 10px의 간격을 만들어 줍니다.
참고 사항
기본값인 row 대신 column을 사용하면 일반적인 그리드 배치와 달리 세로 방향으로 항목이 채워지므로, 갤러리나 카드 목록처럼 특정한 정렬 흐름이 필요한 UI를 만들 때 유용합니다. 또한 dense 키워드를 함께 사용하면 불규칙한 크기의 항목들로 인해 생긴 빈 공간을 자동으로 메워 더 조밀한 레이아웃을 구성할 수 있습니다. 다만 dense는 시각적 순서와 DOM 순서가 달라질 수 있으므로, 키보드 탐색이나 스크린 리더 접근성을 고려할 때 주의해서 사용해야 합니다.