Flexbox & Grid
Justify Items
Utilities for controlling how grid items are aligned along their inline axis.
Basic usage
Start
Use justify-items-start to justify grid items against the start of their inline axis:
01
02
03
04
05
06
<div className="grid **justify-items-start** ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
End
Use justify-items-end to justify grid items against the end of their inline axis:
01
02
03
04
05
06
<div className="grid **justify-items-end** ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
Center
Use justify-items-center to justify grid items along their inline axis:
01
02
03
04
05
06
<div className="grid **justify-items-center** ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>
Stretch
Use justify-items-stretch to stretch items along their inline axis:
01
02
03
04
05
06
<div className="grid **justify-items-stretch** ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>