Flexbox & Grid
grid-auto-flow
그리드 내 엘리먼트 자동 배치 방식을 제어하는 유틸리티
| 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; |
예제
기본 예제
그리드 레이아웃에서 자동 배치 알고리즘을 제어하기 위해 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>반응형 디자인
접두사 a grid-auto-flow 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="grid grid-flow-col md:grid-flow-row ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
