Flexbox & Grid
grid-template-columns
그리드 레이아웃에서 컬럼을 지정하는 유틸리티입니다.
| Class | Styles |
|---|---|
grid-cols-<number> | grid-template-columns: repeat(<number>, minmax(0, 1fr)); |
grid-cols-none | grid-template-columns: none; |
grid-cols-subgrid | grid-template-columns: subgrid; |
grid-cols-[<value>] | grid-template-columns: <value>; |
grid-cols-(<custom-property>) | grid-template-columns: var(<custom-property>); |
예제
그리드 컬럼 지정하기
grid-cols-<number> 유틸리티를 사용해 동일한 크기의 컬럼을 가진 그리드를 만들 수 있습니다. 예를 들어 grid-cols-2와 grid-cols-4를 사용하면 각각 2개와 4개의 동일한 크기의 컬럼을 생성할 수 있습니다.
01
02
03
04
05
06
07
08
09
<div class="grid grid-cols-4 gap-4"> <div>01</div> <!-- ... --> <div>09</div></div>서브그리드 구현하기
grid-cols-subgrid 유틸리티를 사용하여 부모 아이템이 정의한 컬럼 트랙을 적용할 수 있습니다.
01
02
03
04
05
06
<div class="grid grid-cols-4 gap-4"> <div>01</div> <!-- ... --> <div>05</div> <div class="col-span-3 grid grid-cols-subgrid gap-4"> <div class="col-start-2">06</div> </div></div>커스텀 값 사용하기
grid-cols-[<value>] 구문을 사용하세요 columns를 완전히 커스텀한 값으로 설정하려면:
<div class="grid-cols-[200px_minmax(900px,_1fr)_100px] ..."> <!-- ... --></div>CSS 변수를 사용하려면 grid-cols-(<custom-property>) 구문을 사용할 수도 있습니다:
<div class="grid-cols-(--my-grid-cols) ..."> <!-- ... --></div>이는 grid-cols-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a grid-template-columns 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="grid grid-cols-1 md:grid-cols-6 ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
