Justify Items

Utilities for controlling how grid items are aligned along their inline axis.

React propsCSS Properties
justifyItems={keyword}justify-items: {keyword};

Auto

Use justifyItems="auto" to justify grid items automatically on their inline axis:

<x.div display="grid" justifyItems="auto"> <div>1</div> {/* ... */} <div>6</div> </x.div>

Start

Use justifyItems="start" to justify grid items against the start of their inline axis:

<x.div display="grid" justifyItems="start"> <div>1</div> {/* ... */} <div>6</div> </x.div>

End

Use justifyItems="end" to justify grid items against the end of their inline axis:

<x.div display="grid" justifyItems="end"> <div>1</div> {/* ... */} <div>6</div> </x.div>

Center

Use justifyItems="center" to justify grid items against the center of their inline axis:

<x.div display="grid" justifyItems="center"> <div>1</div> {/* ... */} <div>6</div> </x.div>

Stretch

Use justifyItems="stretch" to stretch items along their inline axis:

<x.div display="grid" justifyItems="stretch"> <div>1</div> {/* ... */} <div>6</div> </x.div>

Responsive

To justify grid items along their inline axis at a specific breakpoint, use responsive object notation. For example, adding the property justifyItems={{ md: "center" }} to an element would apply the justifyItems="center utility at medium screen sizes and above.

<x.div display="grid" justifyItems={{ md: 'center' }}> {/* ... */} </x.div>

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub