Grid Column
Set the size & position of items across grid columns.
Widely available
This feature is well established and works across many devices and browser versions.
Usage
Grid Column Span
Allow a grid item to span a specific number of columns.
<div class="d-g g-4 gtc-3 ta-c"> <div class="bg-indigo gc-s-2 p-4 c-white">A</div> <div class="bg-indigo-8 p-4 c-indigo-5">B</div> <div class="bg-indigo-8 p-4 c-indigo-5">C</div> <div class="bg-indigo gc-s-2 p-4 c-white">D</div></div>Grid Column End
Control where a grid item ends within the grid columns.
Widely available
This feature is well established and works across many devices and browser versions.
<div class="d-g g-4 gtc-4 ta-c c-white"> <div class="bg-indigo gce-3 p-4">A</div> <div class="bg-indigo p-4">B</div> <div class="bg-indigo p-4">C</div></div>Grid Column Start
Control the starting grid line for a grid item.
Widely available
This feature is well established and works across many devices and browser versions.
Position the item to start in the third column of the grid.
<div class="d-g g-4 gcs-3 gtc-4 ta-c c-white"> <div class="bg-indigo p-4">A</div> <div class="bg-indigo p-4">B</div> <div class="bg-indigo p-4">C</div></div>Responsive Design
Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.
Target viewport sizes with breakpoint prefixes.
sm:gc-[value]md:gc-[value]lg:gc-[value]xxl:gc-[value]Hover State
Apply styles conditionally on hover using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
h:gc-[value]