grid-column-start
Specifies the column line number where a grid item starts. Combined with gce(grid-column-end), it can create items spanning multiple columns.
Class List
| Class | CSS | Description |
|---|---|---|
gcs1 | grid-column-start: 1 | Starts at column line 1 (first column) |
gcs2 | grid-column-start: 2 | Starts at column line 2 (second column) |
gcs3 | grid-column-start: 3 | Starts at column line 3 (third column) |
Usage Examples
Grid line numbers start from 1. For a 3-column grid, line numbers are 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>Visual Comparison
3-column grid -- Starting at second column with gcs2
gcs2autoautoauto
First item starts at column line 2, leaving the first cell empty
Column merging with gcs + gce combination
gcs1 + gce3 spans column lines 1 to 3, i.e., 2 columns.
gcs1 + gce3 = Spans 2 columns
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>