grid-column
Place a grid item between column lines or across a number of columns.
Overview
| Class | Declarations |
|---|---|
grid-column:<value> | grid-column: <value>;
|
grid-column:2/4 | grid-column: 2/4;
|
grid-col:<value> | grid-column: <value>;
|
grid-col-span:<integer> | grid-column: span <integer>/span <integer>;
|
grid-col-start:<value> | grid-column-start: <value>;
|
grid-col-end:<value> | grid-column-end: <value>;
|
Basic usage
Place an item by columns
grid-column:2/4 places the blue item between column lines 2 and 4, covering the last two columns of this three-column grid. Use 1/-1 to span from the first to the last explicit grid line.
<div id="layout" class="grid grid-cols:3 grid-auto-rows:48px gap-md w:17.5rem max-w:100%"> <div id="peer" class="p-sm">01</div> <div id="target" class="grid-column:2/4 p-sm">2 → 4</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div> <div id="item-5" class="p-sm">05</div></div><div id="layout" class="grid grid-cols:3 grid-auto-rows:48px gap-md w:17.5rem max-w:100%"> <div id="target" class="grid-column:1/-1 p-sm">1 → −1</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div> <div id="item-4" class="p-sm">04</div></div>Positive indices count from inline-start; negative indices count backward from the explicit grid’s inline-end. -1 does not move to the end of any later implicit columns. Use grid-col-start:2 and grid-col-end:4 when setting the two edges separately.
Span columns
grid-col-span:2 gives an auto-placed item a two-column span without fixing its starting line. The blue item takes the first available pair; the violet item fits in the remaining column. The blue width includes the internal 16px gap.
<div id="layout" class="grid grid-cols:3 grid-auto-rows:48px gap-md w:17.5rem max-w:100%"> <div id="target" class="grid-col-span:2 p-sm">2 columns</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div></div>The parent must have enough columns for the intended span. A span or explicit line outside its template can create implicit tracks.
Apply conditionally
Use conditional queries to change the layout at a real viewport width. The blue item occupies one auto-placed cell initially. From sm, 1/-1 spans the full explicit grid and pushes the siblings onto the next row.
<div id="layout" class="grid grid-cols:3 grid-auto-rows:48px gap-md w:17.5rem max-w:100%"> <div id="target" class="grid-column:auto p-sm grid-column:1/-1@sm">01</div> <div id="peer" class="p-sm">02</div> <div id="item-3" class="p-sm">03</div></div>