그리드 자동 배치
그리드 자동 배치 (Grid Auto Flow)
그리드 레이아웃에서 항목들이 자동 배치될 때 흐르는 방향을 정해 주는 유틸리티예요. 항목들이 열(column) 방향으로 채워질지, 행(row) 방향으로 채워질지, 그리고 빈틈 없이 조밀하게 채울지 제어할 수 있어요.
출처: 문서
본문
클래스 & 스타일 (Class Styles)
grid-flow-row
grid-auto-flow: row;
grid-flow-col
grid-auto-flow: column;
grid-flow-dense
grid-auto-flow: dense;
grid-flow-row-dense
grid-auto-flow: row dense;
grid-flow-col-dense
grid-auto-flow: column dense;
기본 예제 (Basic example)
grid-flow-col, grid-flow-row-dense 같은 유틸리티를 사용하면 그리드 레이아웃에서 자동 배치 알고리즘이 동작하는 방식을 제어할 수 있어요.
01 02 03 04 05
<div class="grid grid-flow-row-dense grid-cols-3 grid-rows-3 ...">
<div class="col-span-2">01</div>
<div class="col-span-2">02</div>
<div>03</div>
<div>04</div>
<div>05</div>
</div>
반응형 디자인 (Responsive design)
grid-auto-flow 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.
<div class="grid grid-flow-col md:grid-flow-row ...">
<!-- ... -->
</div>
variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.