grid-column-end
Specifies the column line number where a grid item ends. Combined with gcs(grid-column-start), it can merge multiple columns. Use neg-gce1 to extend to the last column line (-1).
Class List
| Class | CSS | Description |
|---|---|---|
gce3 | grid-column-end: 3 | Ends at column line 3 |
gce4 | grid-column-end: 4 | Ends at column line 4 |
neg-gce1 | grid-column-end: -1 | Ends at last column line (full span) |
Usage Examples
gcs1 + gce3 starts at column line 1 and ends at line 3, spanning 2 columns.
<!-- 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>Visual Comparison
gcs1 gce3 -- Spans 2 columns
gcs1 gce3autoautoautoauto
gcs1 gce4 -- Spans all 3 columns
gcs1 gce4autoautoauto
gcs1 neg-gce1 -- To last line (full span)
gcs1 neg-gce1autoautoautoauto
Tips & Notes
Full width with neg-gce1
neg-gce1 equals grid-column-end: -1, always extending to the last line regardless of column count. Useful for full-width headers or footers.
Column count calculation
Columns spanned = gce - gcs. Example: gcs1 + gce4 = 4 - 1 = 3 columns.