Grid Row
Control the size and position of items across grid rows.
Usage
Grid Row Span
Control the row span of a grid item.
Widely available
This feature is well established and works across many devices and browser versions.
Allow an item to span across multiple rows.
<div class="d-g g-4 gtc-3 h-75"> <div class="ai-c bg-indigo gr-s-2 d-f jc-c p-4 c-white">A</div> <div class="ai-c bg-indigo-8 d-f jc-c p-4 c-indigo-5">B</div> <div class="ai-c bg-indigo-8 d-f jc-c p-4 c-indigo-5">C</div> <div class="ai-c bg-indigo-8 d-f jc-c p-4 c-indigo-5">D</div> <div class="ai-c bg-indigo-8 d-f jc-c p-4 c-indigo-5">E</div></div>Grid Row End
Control where a grid item ends within the grid rows.
Widely available
This feature is well established and works across many devices and browser versions.
Position an item to end at a specific grid line.
<div class="p-r"> <div class="d-g g-4 gaf-c gtr-3 ta-c"> <div class="ai-c bg-indigo d-f d-g gr-s-2 gre-3 jc-c p-4 c-white">A</div> <div class="ai-c bg-indigo-8 d-f d-g gre-4 grs-1 jc-c p-4 c-indigo-5">B</div> <div class="ai-c bg-indigo-8 d-f d-g gre-4 grs-1 jc-c p-4 c-indigo-5">C</div> </div></div>Grid Row Start
Control where a grid item begins within the grid rows.
Widely available
This feature is well established and works across many devices and browser versions.
Position an item to start at a specific grid line.
<div class="p-r"> <div class="d-g g-4 gaf-c gtr-3 ta-c"> <div class="ai-c bg-indigo d-f d-g gr-s-2 grs-2 jc-c p-4 c-white">A</div> <div class="ai-c bg-indigo-8 d-f d-g gre-4 grs-1 jc-c p-4 c-indigo-5">B</div> <div class="ai-c bg-indigo-8 d-f d-g gre-4 grs-1 jc-c p-4 c-indigo-5">C</div> </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:gr-[value]md:gr-[value]lg:gr-[value]xxl:gr-[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:gr-[value]