AAtomic CSS

grid-auto-flow

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스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열) 순서로 채움

언제 뭘 쓸까?

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">상황추천이유
Standard grid (row-first)gafrDefault. Most card/list layouts
Column-first placementgafcTimeline, newspaper-style vertical flow
No-gap gallerygafdMaximize space efficiency with varied card sizes
Row-first + fill gapsgafrdSame as gafd (row is default)
Column-first + fill gapsgafcdFill gaps in vertical flow too

클래스별 상세

gafrgrid-auto-flow: row

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

<!-- Default row direction (gafr can be omitted) -->
<div class="dg gtcr3-1fr gap16px">
  <div>1</div>  <!-- Row 1, Col 1 -->
  <div>2</div>  <!-- Row 1, Col 2 -->
  <div>3</div>  <!-- Row 1, Col 3 -->
  <div>4</div>  <!-- Row 2, Col 1 -->
  <div>5</div>  <!-- Row 2, Col 2 -->
</div>

<!-- Explicitly set row (to revert from gafc) -->
<div class="dg gtcr3-1fr gafr gap16px">
  <div>Items are placed in row direction</div>
</div>

gafcgrid-auto-flow: column

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

<!-- Column direction (gtr required!) -->
<div class="dg gtcr3-1fr gtrr2-1fr gafc gap16px">
  <div>1</div>  <!-- Col 1, Row 1 -->
  <div>2</div>  <!-- Col 1, Row 2 -->
  <div>3</div>  <!-- Col 2, Row 1 -->
  <div>4</div>  <!-- Col 2, Row 2 -->
  <div>5</div>  <!-- Col 3, Row 1 -->
</div>

<!-- Vertical card flow -->
<div class="dg gtrr3-auto gafc gap16px">
  <div class="bg18181B p16px br8px">First</div>
  <div class="bg18181B p16px br8px">Second</div>
  <div class="bg18181B p16px br8px">Third</div>
  <div class="bg27272A p16px br8px">Fourth (Next column)</div>
</div>

주의

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

gafdgrid-auto-flow: dense

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

<!-- Dense gallery layout -->
<div class="dg gtcr3-1fr gafd gap16px">
  <div class="bg18181B p2rem br8px" style="grid-column: span 2">Wide Card 1</div>
  <div class="bg27272A p2rem br8px">Card 2</div>
  <div class="bg27272A p2rem br8px" style="grid-column: span 2">Wide Card 3</div>
  <div class="bg18181B p2rem br8px">Card 4 - fills gap</div>
  <div class="bg18181B p2rem br8px">Card 5</div>
</div>

<!-- Image gallery -->
<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 (same effect as gafd) -->
<div class="dg gtcr4-1fr gafrd gap16px">
  <div class="bg18181B p16px br8px" style="grid-column: span 2">2 col</div>
  <div class="bg27272A p16px br8px">1 col</div>
  <div class="bg18181B p16px br8px" style="grid-column: span 3">3 col</div>
  <div class="bg27272A p16px br8px">Fills previous gap via 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">Vertical 2 rows</div>
  <div class="bg27272A p16px br8px">1 row</div>
  <div class="bg27272A p16px br8px">1 row</div>
  <div class="bg18181B p16px br8px" style="grid-row: span 2">Vertical 2 rows</div>
  <div class="bg27272A p16px br8px">Fills gap via dense</div>
</div>

반응형 사용

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

<!-- Desktop: column → Mobile: 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 only on desktop -->
<div class="dg gtcr3-1fr gafd sm-gafr gap16px">
  <div>Dense layout, normal below 768px</div>
</div>
<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 조합동작
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