Justify Items
Controls the alignment of grid elements relative to their inline axis.
Widely available
This feature is well established and works across many devices and browser versions.
| Class | Style |
|---|---|
ji-c | justify-items: center; |
ji-e | justify-items: end; |
ji-s | justify-items: start; |
ji-st | justify-items: stretch; |
Center
The items will be centered within their grid area along the inline axis.
<div class="p-r tc-white"> <div class="d-g g-4 gtc-3 ji-c"> <div class="ai-c bg-indigo d-f d-16 jc-c">A</div> <div class="ai-c bg-indigo d-f d-16 jc-c">B</div> <div class="ai-c bg-indigo d-f d-16 jc-c">C</div> </div></div>End
The items will be aligned to the end of their grid area along the inline axis.
<div class="p-r tc-white"> <div class="d-g g-4 gtc-3 ji-e"> <div class="ai-c bg-indigo d-f d-16 jc-c">A</div> <div class="ai-c bg-indigo d-f d-16 jc-c">B</div> <div class="ai-c bg-indigo d-f d-16 jc-c">C</div> </div></div>Start
The items will be aligned to the start of their grid area along the inline axis.
<div class="p-r tc-white"> <div class="d-g g-4 gtc-3 ji-s"> <div class="ai-c bg-indigo d-f d-16 jc-c">A</div> <div class="ai-c bg-indigo d-f d-16 jc-c">B</div> <div class="ai-c bg-indigo d-f d-16 jc-c">C</div> </div></div>Stretch
The items will stretch to fill their grid area along the inline axis.
<div class="p-r tc-white"> <div class="d-g g-4 gtc-3 ji-st"> <div class="ai-c bg-indigo d-f d-14 jc-c">A</div> <div class="ai-c bg-indigo d-f d-14 jc-c">B</div> <div class="ai-c bg-indigo d-f d-14 jc-c">C</div> </div></div>Using utility variants
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
Targeting different viewports
You can combine responsive breakpoints like sm:ji-*, md:ji-*, lg:ji-*, and xxl:ji-* to allow targeting specific utilities in different viewports.
Targeting hover states
Alternatively, you can apply :hover by using h:ji-* utility to override elements and change their values when hovering over them.