grid-column-start
그리드 아이템이 시작되는 열 라인 번호를 지정합니다. gce(grid-column-end)와 함께 사용하면 여러 열을 차지하는 아이템을 만들 수 있습니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
gcs1 | grid-column-start: 1 | 열 라인 1에서 시작 (첫 번째 열) |
gcs2 | grid-column-start: 2 | 열 라인 2에서 시작 (두 번째 열) |
gcs3 | grid-column-start: 3 | 열 라인 3에서 시작 (세 번째 열) |
사용 예시
그리드 라인 번호는 1부터 시작합니다. 3열 그리드의 경우 라인 번호는 1, 2, 3, 4입니다.
<!-- Start at second column -->
<div class="dg gtcr3-1fr gap16px">
<div class="gcs2">Starts at column line 2</div>
<div>auto</div>
<div>auto</div>
</div>
<!-- Place at third column -->
<div class="dg gtcr4-1fr gap16px">
<div class="gcs3">Starts at column line 3</div>
</div>시각적 비교
3열 그리드 — gcs2로 두 번째 열에서 시작
gcs2autoautoauto
첫 번째 아이템이 열 라인 2에서 시작하여 첫 번째 셀이 비어 있습니다
gcs + gce 조합으로 열 병합
gcs1 + gce3은 열 라인 1~3, 즉 2개 열을 차지합니다.
gcs1 + gce3 = 2열 차지
gcs1 gce3autoautoautoauto
<!-- Span 2 columns: line 1 ~ 3 -->
<div class="dg gtcr3-1fr gap16px">
<div class="gcs1 gce3">Spans 2 columns</div>
<div>Remaining 1 column</div>
</div>
<!-- Full column span: line 1 ~ last(-1) -->
<div class="dg gtcr3-1fr gap16px">
<div class="gcs1 neg-gce1">Full column span</div>
<div>Next row</div>
<div>Next row</div>
<div>Next row</div>
</div>