Flexbox & Grid
Utilities for controlling how grid items are aligned along their inline axis.
Class | Styles |
---|---|
justify-items-start | justify-items: start; |
justify-items-end | justify-items: end; |
justify-items-center | justify-items: center; |
justify-items-stretch | justify-items: stretch; |
justify-items-normal | justify-items: normal; |
Use justify-items-start
to justify grid items against the start of their inline axis:
Use justify-items-end
to justify grid items against the end of their inline axis:
Use justify-items-center
to justify grid items along their inline axis:
Use justify-items-stretch
to stretch items along their inline axis:
Prefix a justify-items
utility with a breakpoint variant like md:
to only apply the utility at medium screen sizes and above:
<div class="grid justify-items-start md:justify-items-center ..."> <!-- ... --></div>
Learn more about using variants in the variants documentation.