그리드 열

그리드 열 (Grid Column)

그리드 레이아웃에서 요소가 차지하는 열(column)의 범위와 위치를 정해 주는 유틸리티예요. 몇 개의 열을 가로질러(span) 뻗을지, 시작/끝 라인을 어디로 할지 세밀하게 배치할 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

col-span-<number> grid-column: span <number> / span <number>;

col-span-full grid-column: 1 / -1;

col-span-(<custom-property>) grid-column: span var(<custom-property>) / span var(<custom-property>);

col-span-[<value>] grid-column: span <value> / span <value>;

col-start-<number> grid-column-start: <number>;

-col-start-<number> grid-column-start: calc(<number> * -1);

col-start-auto grid-column-start: auto;

col-start-(<custom-property>) grid-column-start: var(<custom-property>);

col-start-[<value>] grid-column-start: <value>;

col-end-<number> grid-column-end: <number>;

-col-end-<number> grid-column-end: calc(<number> * -1);

col-end-auto grid-column-end: auto;

col-end-(<custom-property>) grid-column-end: var(<custom-property>);

col-end-[<value>] grid-column-end: <value>;

col-auto grid-column: auto;

col-<number> grid-column: <number>;

-col-<number> grid-column: calc(<number> * -1);

col-(<custom-property>) grid-column: var(<custom-property>);

col-[<value>] grid-column: <value>;

열 가로지르기 (Spanning columns)

col-span-2, col-span-4 같은 col-span-<number> 유틸리티를 사용하면 요소가 n개의 열을 가로질러 뻗도록 만들 수 있어요.

01 02 03 04 05 06 07

<div class="grid grid-cols-3 gap-4">
  <div class="...">01</div>
  <div class="...">02</div>
  <div class="...">03</div>
  <div class="col-span-2 ...">04</div>
  <div class="...">05</div>
  <div class="...">06</div>
  <div class="col-span-2 ...">07</div>
</div>

시작·끝 라인 지정하기 (Starting and ending lines)

col-start-2, col-end-3 같은 col-start-<number> 또는 col-end-<number> 유틸리티를 사용하면 요소가 n번째 그리드 라인에서 시작하거나 끝나도록 할 수 있어요.

01 02 03 04

<div class="grid grid-cols-6 gap-4">
  <div class="col-span-4 col-start-2 ...">01</div>
  <div class="col-start-1 col-end-3 ...">02</div>
  <div class="col-span-2 col-end-7 ...">03</div>
  <div class="col-start-1 col-end-7 ...">04</div>
</div>

이 유틸리티들은 col-span-<number> 유틸리티와 조합해 특정 개수의 열을 가로지르도록 할 수도 있어요.

커스텀 값 사용하기 (Using a custom value)

col-[<value>], col-span-[<value>], col-start-[<value>], col-end-[<value>] 같은 유틸리티를 사용하면 완전히 커스텀한 값으로 그리드 열의 크기와 위치를 설정할 수 있어요.

<div class="col-[16_/_span_16] ...">
  <!-- ... -->
</div>

CSS 변수를 쓸 때는 col-(<custom-property>) 문법을 사용할 수도 있어요.

<div class="col-(--my-columns) ...">
  <!-- ... -->
</div>

이것은 col-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

grid-column, grid-column-start, grid-column-end 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<div class="col-span-2 md:col-span-6 ...">
  <!-- ... -->
</div>

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.