grid-column-end
그리드 아이템이 끝나는 열 라인 번호를 지정합니다. gcs(grid-column-start)와 함께 사용하면 여러 열을 병합할 수 있습니다. neg-gce1로 마지막 열 라인(-1)까지 확장할 수 있습니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
gce3 | grid-column-end: 3 | 열 라인 3에서 종료 |
gce4 | grid-column-end: 4 | 열 라인 4에서 종료 |
neg-gce1 | grid-column-end: -1 | 마지막 열 라인에서 종료 (전체 확장) |
사용 예시
gcs1 + gce3은 열 라인 1에서 시작하여 라인 3에서 끝나므로, 2개 열을 차지합니다.
<!-- 2열 차지 -->
<div class="dg gtcr3-1fr gap16px">
<div class="gcs1 gce3">2열 차지 (라인 1~3)</div>
<div>나머지</div>
</div>
<!-- 전체 너비 (마지막 라인까지) -->
<div class="dg gtcr4-1fr gap16px">
<div class="gcs1 neg-gce1">전체 너비 (열 수 무관)</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>시각적 비교
gcs1 gce3 — 2열 차지
gcs1 gce3autoautoautoauto
gcs1 gce4 — 3열 전체 차지
gcs1 gce4autoautoauto
gcs1 neg-gce1 — 마지막 라인까지 (전체)
gcs1 neg-gce1autoautoautoauto
팁 & 주의사항
neg-gce1로 전체 너비
neg-gce1은 grid-column-end: -1이므로 열 수에 관계없이 항상 마지막 라인까지 확장됩니다. 전체 너비 헤더나 풋터에 유용합니다.
열 수 계산
차지하는 열 수 = gce - gcs. 예: gcs1 + gce4 = 4 - 1 = 3열 차지.