Justify Items
Controls the alignment of grid elements relative to their inline axis.
| Class | Properties |
|---|---|
| ji-c | justify-items: center; |
| ji-s | justify-items: start; |
| ji-e | justify-items: end; |
| ji-fs | justify-items: flex-start; |
| ji-fe | justify-items: flex-end; |
| ji-l | justify-items: left; |
| ji-r | justify-items: right; |
| ji-n | justify-items: normal; |
| ji-sb | justify-items: space-between; |
| ji-sa | justify-items: space-around; |
| ji-se | justify-items: space-evenly; |
| ji-stretch | justify-items: stretch; |
Using breakpoints
Using responsive breakpoints like sm:ji-*, md:ji-*, lg:ji-*, and xxl:ji-* allows targeting specific utilities in different viewports.
<div class="ji-l md:ji-r ..."></div>Using variants
Using :hover variants such as h:ji-* allows you to override elements and change their values when hovering over them.
<div class="ji-l h:ji-r ..."></div>