AAtomic CSS

grid-auto-flow

그리드 아이템이 자동 배치되는 방향을 제어합니다. 기본값은 row(가로)이며, dense를 추가하면 빈 공간을 채우는 밀집 배치가 됩니다.

클래스 목록

클래스CSS설명
gafrgrid-auto-flow: row행 방향 배치 (기본값). 왼쪽→오른쪽으로 채운 뒤 다음 행
gafcgrid-auto-flow: column열 방향 배치. 위→아래로 채운 뒤 다음 열
gafdgrid-auto-flow: dense밀집 배치. 빈 공간을 뒤쪽 아이템으로 채움
gafrdgrid-auto-flow: row dense행 방향 + 밀집 배치
gafcdgrid-auto-flow: column dense열 방향 + 밀집 배치

시각적 비교

같은 아이템이 flow 방향에 따라 어떻게 배치되는지 비교합니다.

Row (기본값) — gafr

1
2
3
4
5

1→2→3 순서로 행을 먼저 채우고 다음 행으로

Column — gafc

1
2
3
4
5

1→2 순서로 열을 먼저 채우고 다음 열로

Dense — gafd

1
2 (넓음)
3
4
5

빈 공간이 생기면 뒤쪽 아이템을 앞으로 당겨 채움

row vs column 비교

gafr은 행을 먼저 채우고 다음 행으로, gafc는 열을 먼저 채우고 다음 열로 이동합니다.

row (기본값) — gafr

1
2
3
4
5

1→2→3 (1행) → 4→5 (2행) 순서로 채움

column — gafc

1
2
3
4
5

1→2 (1열) → 3→4 (2열) → 5 (3열) 순서로 채움

언제 뭘 쓸까?

상황추천이유
일반 그리드 (행 우선)gafr기본값. 대부분의 카드, 목록 레이아웃
세로 우선 배치gafc타임라인, 신문 스타일 세로 흐름
빈 공간 없는 갤러리gafd크기가 다른 카드에서 공간 효율 극대화
행 우선 + 빈 공간 채우기gafrdgafd와 동일 (row가 기본값)
열 우선 + 빈 공간 채우기gafcd세로 흐름에서도 빈 공간 채우기

클래스별 상세

gafrgrid-auto-flow: row

기본값입니다. 아이템을 행 방향(왼쪽→오른쪽)으로 배치하고, 행이 꽉 차면 다음 행으로 넘어갑니다. 대부분의 그리드 레이아웃에서 기본 동작이므로 명시적으로 쓸 일은 드뭅니다.

<!-- 기본 행 방향 배치 (gafr 생략 가능) -->
<div class="dg gtcr3-1fr gap16px">
  <div>1</div>  <!-- 1행 1열 -->
  <div>2</div>  <!-- 1행 2열 -->
  <div>3</div>  <!-- 1행 3열 -->
  <div>4</div>  <!-- 2행 1열 -->
  <div>5</div>  <!-- 2행 2열 -->
</div>

<!-- 명시적으로 row 지정 (gafc에서 되돌릴 때) -->
<div class="dg gtcr3-1fr gafr gap16px">
  <div>행 방향으로 배치됩니다</div>
</div>

gafcgrid-auto-flow: column

아이템을 열 방향(위→아래)으로 배치하고, 열이 꽉 차면 다음 열로 넘어갑니다. 세로 우선 배치가 필요한 타임라인, 신문 스타일 레이아웃 등에 활용합니다.

<!-- 열 방향 배치 (gtr 필수!) -->
<div class="dg gtcr3-1fr gtrr2-1fr gafc gap16px">
  <div>1</div>  <!-- 1열 1행 -->
  <div>2</div>  <!-- 1열 2행 -->
  <div>3</div>  <!-- 2열 1행 -->
  <div>4</div>  <!-- 2열 2행 -->
  <div>5</div>  <!-- 3열 1행 -->
</div>

<!-- 세로 카드 흐름 -->
<div class="dg gtrr3-auto gafc gap16px">
  <div class="bg18181B p16px br8px">첫 번째</div>
  <div class="bg18181B p16px br8px">두 번째</div>
  <div class="bg18181B p16px br8px">세 번째</div>
  <div class="bg27272A p16px br8px">네 번째 (다음 열)</div>
</div>

주의

gafc를 사용할 때는 gtr(grid-template-rows)로 행 수를 정해야 예상대로 동작합니다. 행 수를 정하지 않으면 모든 아이템이 한 행에 배치됩니다.

gafdgrid-auto-flow: dense

빈 공간(gap)이 생기면 뒤쪽 아이템이 앞으로 당겨져 빈 자리를 채웁니다. 크기가 다른 카드 목록, 이미지 갤러리 등에서 공간을 효율적으로 사용할 때 유용합니다.

<!-- 갤러리 밀집 배치 -->
<div class="dg gtcr3-1fr gafd gap16px">
  <div class="bg18181B p2rem br8px" style="grid-column: span 2">넓은 카드 1</div>
  <div class="bg27272A p2rem br8px">카드 2</div>
  <div class="bg27272A p2rem br8px" style="grid-column: span 2">넓은 카드 3</div>
  <div class="bg18181B p2rem br8px">카드 4 ← 빈칸을 채움</div>
  <div class="bg18181B p2rem br8px">카드 5</div>
</div>

<!-- 이미지 갤러리 -->
<div class="dg gtcrfit-minmax20rem-1fr gafd gap8px">
  <img src="photo1.jpg" class="w100p br8px" />
  <img src="photo2.jpg" class="w100p br8px" style="grid-column: span 2" />
  <img src="photo3.jpg" class="w100p br8px" />
  <img src="photo4.jpg" class="w100p br8px" />
</div>

dense 배치 — 빈 공간 채우기

1 (2칸)
2
3 (2칸)
4
5

dense가 없으면 아이템 3 앞에 빈칸이 생기지만, dense는 아이템 4를 앞으로 당겨 채웁니다

주의: 순서가 바뀔 수 있음

dense는 시각적 순서가 DOM 순서와 달라질 수 있습니다. 키보드 탭 순서나 스크린리더 읽기 순서에 영향을 줄 수 있으니 접근성에 주의하세요.

gafrdgrid-auto-flow: row dense

행 방향 배치 + 밀집 채우기를 함께 적용합니다. gafd와 동일한 효과입니다(기본 방향이 row이므로).

<!-- row dense (gafd와 동일한 효과) -->
<div class="dg gtcr4-1fr gafrd gap16px">
  <div class="bg18181B p16px br8px" style="grid-column: span 2">2칸</div>
  <div class="bg27272A p16px br8px">1칸</div>
  <div class="bg18181B p16px br8px" style="grid-column: span 3">3칸</div>
  <div class="bg27272A p16px br8px">← dense로 앞의 빈칸을 채움</div>
</div>

gafcdgrid-auto-flow: column dense

열 방향 배치 + 밀집 채우기를 함께 적용합니다. 세로 우선 배치에서 빈 공간까지 채워야 할 때 사용합니다.

<!-- column dense -->
<div class="dg gtcr3-1fr gtrr3-auto gafcd gap16px">
  <div class="bg18181B p16px br8px" style="grid-row: span 2">세로 2칸</div>
  <div class="bg27272A p16px br8px">1칸</div>
  <div class="bg27272A p16px br8px">1칸</div>
  <div class="bg18181B p16px br8px" style="grid-row: span 2">세로 2칸</div>
  <div class="bg27272A p16px br8px">← dense로 빈칸 채움</div>
</div>

반응형 사용

미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 배치 방향을 변경할 수 있습니다.

<!-- 데스크탑: column → 모바일: row -->
<div class="dg gtcr3-1fr gtrr2-1fr gafc sm-gafr gap16px">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<!-- dense는 데스크탑에서만 -->
<div class="dg gtcr3-1fr gafd sm-gafr gap16px">
  <div>밀집 배치 → 768px 이하 일반 배치</div>
</div>
클래스 조합동작
gafc sm-gafr기본 열 방향 → 768px 이하에서 행 방향
gafd sm-gafr기본 밀집 배치 → 768px 이하에서 일반 행 배치
gafr md-gafc기본 행 방향 → 1024px 이하에서 열 방향

팁 & 주의사항

gafr은 생략 가능

grid-auto-flow의 기본값이 row이므로, gafr은 명시적으로 쓸 필요가 없습니다. gafc에서 되돌릴 때만 사용합니다.

dense는 갤러리에 최적

크기가 다른 이미지 카드를 gafd와 함께 사용하면 빈 공간 없이 촘촘하게 배치됩니다. Pinterest 스타일 레이아웃에 적합합니다.

gafc + gtr 필수 조합

gafc를 사용할 때는 반드시 gtr로 행 템플릿을 정의해야 합니다. 그렇지 않으면 모든 아이템이 한 행에 나열됩니다.

grid-template-columnsgrid-template-rowsgapdisplay