Grid Template Columns

그리드에서 몇 개의 열(column)을 만들고 각 열의 크기를 어떻게 배분할지 정해주는 유틸리티예요. 동일한 크기의 열 여러 개를 쉽게 만들 수 있어요.

출처: 문서

본문

ClassStyles

Class	Properties
`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>);`

예시 (Examples)

그리드 열 지정하기 (Specifying the grid columns)

grid-cols-<number> 유틸리티를 grid-cols-2나 grid-cols-4처럼 사용하면 n개의 동일한 크기 열을 가진 그리드를 만들 수 있어요.

<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

서브그리드 구현하기 (Implementing a subgrid)

grid-cols-subgrid 유틸리티를 사용하면 부모가 정의한 열 트랙(track)을 그대로 물려받을 수 있어요.

<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>

사용자 정의 값 사용하기 (Using a custom value)

grid-cols-[<value>] 문법을 사용하면 완전히 사용자 정의한 값으로 열을 정할 수 있어요.

<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() 함수를 자동으로 붙여주는 것뿐이에요.

반응형 디자인 (Responsive design)

grid-template-columns 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<div class="grid grid-cols-1 md:grid-cols-6 ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

Grid Template Columns