grid-column-start
그리드 아이템이 시작되는 열 라인 번호를 지정합니다. gce(grid-column-end)와 함께 사용하면 여러 열을 차지하는 아이템을 만들 수 있습니다.
클래스 목록
| 클래스 | 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입니다.
<!-- 두 번째 열에서 시작 -->
<div class="dg gtcr3-1fr gap16px">
<div class="gcs2">열 라인 2에서 시작</div>
<div>auto</div>
<div>auto</div>
</div>
<!-- 세 번째 열에 배치 -->
<div class="dg gtcr4-1fr gap16px">
<div class="gcs3">열 라인 3에서 시작</div>
</div>시각적 비교
3열 그리드 — gcs2로 두 번째 열에서 시작
gcs2autoautoauto
첫 번째 아이템이 열 라인 2에서 시작하여 첫 번째 셀이 비어 있습니다
gcs + gce 조합으로 열 병합
gcs1 + gce3은 열 라인 1~3, 즉 2개 열을 차지합니다.
gcs1 + gce3 = 2열 차지
gcs1 gce3autoautoautoauto
<!-- 2열 차지: 라인 1 ~ 3 -->
<div class="dg gtcr3-1fr gap16px">
<div class="gcs1 gce3">2열 차지</div>
<div>나머지 1열</div>
</div>
<!-- 전체 열 차지: 라인 1 ~ 마지막(-1) -->
<div class="dg gtcr3-1fr gap16px">
<div class="gcs1 neg-gce1">전체 열 차지</div>
<div>다음 행</div>
<div>다음 행</div>
<div>다음 행</div>
</div>