grid-column-end
그리드 아이템이 끝나는 열 라인 번호를 지정합니다. gcs(grid-column-start)와 함께 사용하면 여러 열을 병합할 수 있습니다. neg-gce1로 마지막 열 라인(-1)까지 확장할 수 있습니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
gce3 | grid-column-end: 3 | 열 라인 3에서 종료 |
gce4 | grid-column-end: 4 | 열 라인 4에서 종료 |
neg-gce1 | grid-column-end: -1 | 마지막 열 라인에서 종료 (전체 확장) |
사용 예시
gcs1 + gce3은 열 라인 1에서 시작하여 라인 3에서 끝나므로, 2개 열을 차지합니다.
<!-- Span 2 columns -->
<div class="dg gtcr3-1fr gap16px">
<div class="gcs1 gce3">Spans 2 columns (line 1~3)</div>
<div>Remaining</div>
</div>
<!-- Full width (to last line) -->
<div class="dg gtcr4-1fr gap16px">
<div class="gcs1 neg-gce1">Full width (regardless of column count)</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열 차지.