Flexbox & Grid
grid-auto-columns
암시적으로 생성된 그리드 컬럼의 크기를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
auto-cols-auto | grid-auto-columns: auto; |
auto-cols-min | grid-auto-columns: min-content; |
auto-cols-max | grid-auto-columns: max-content; |
auto-cols-fr | grid-auto-columns: minmax(0, 1fr); |
auto-cols-(<custom-property>) | grid-auto-columns: var(<custom-property>); |
auto-cols-[<value>] | grid-auto-columns: <value>; |
예제
기본 예제
auto-cols-min과 auto-cols-max 같은 유틸리티를 사용해 암시적으로 생성된 그리드 컬럼의 크기를 제어할 수 있습니다:
<div class="grid auto-cols-max grid-flow-col"> <div>01</div> <div>02</div> <div>03</div></div>커스텀 값 사용하기
auto-cols-[<value>] 구문을 사용하세요 암시적으로 생성된 그리드 컬럼의 크기를 완전히 커스텀한 값으로 설정하려면:
<div class="auto-cols-[minmax(0,2fr)] ..."> <!-- ... --></div>CSS 변수를 사용하려면 auto-cols-(<custom-property>) 구문을 사용할 수도 있습니다:
<div class="auto-cols-(--my-auto-cols) ..."> <!-- ... --></div>이는 auto-cols-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a grid-auto-columns 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="grid grid-flow-col auto-cols-max md:auto-cols-min ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
