자동 생성 열 크기
자동 생성 열 크기 (Grid Auto Columns)
명시적으로 정의하지 않은, 암시적으로 생성되는(implicitly-created) 그리드 열의 크기를 정해 주는 유틸리티예요. 항목이 열을 넘어 새로 채워질 때 그 열의 너비를 제어할 수 있어요.
출처: 문서
본문
클래스 & 스타일 (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-<number>
grid-auto-columns: calc(var(--spacing) * <number>);
auto-cols-(<custom-property>)
grid-auto-columns: var(<custom-property>);
auto-cols-[<value>]
grid-auto-columns: <value>;
기본 예제 (Basic example)
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>
커스텀 값 사용하기 (Using a custom value)
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() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.
반응형 디자인 (Responsive design)
grid-auto-columns 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.
<div class="grid grid-flow-col auto-cols-max md:auto-cols-min ...">
<!-- ... -->
</div>
variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.