Justify Self

Utilities for controlling how an individual grid item is aligned along its inline axis.

React propsCSS Properties
justifySelf={keyword}justify-self: {keyword};

Auto

Use justifySelf="auto" to align an item based on the value of the grid's justify-items property:

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

Start

Use justifySelf="start" to align a grid item to the start its inline axis:

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

Center

Use justifySelf="center" to align a grid item along the center its inline axis:

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

End

Use justifySelf="end" to align a grid item to the end its inline axis:

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

Stretch

Use justifySelf="stretch" to stretch a grid item to fill the grid area on its inline axis:

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

Responsive

To control the alignment of a grid item inside its grid area at a specific breakpoint,, use responsive object notation. For example, adding the property justifySelf={{ md: "center" }} to an element would apply the justifySelf="center utility at medium screen sizes and above.

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

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

Edit this page on GitHub