Flexbox & Grid
grid-column
Setting a grid items's size and location in a grid layout.
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
Use grid-column to place an item between column grid lines.
grid-column:2/4
Item
<div class="grid-column:2/4">Item</div>Span columns
<div class="grid-col-span:2">Spans two columns</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="grid-column:2/4:hover grid-column:2/4@sm grid-column:2/4@dark grid-column:2/4@print">…</div>