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:

<> <template preview> <x.div display="grid" gridTemplateColumns={3} gap={4} justifyItems="stretch" > {Array.from({ length: 6 }, (_, index) => index + 1).map((value) => ( <x.div key={value} borderRadius="md" h={16} bg={value === 2 ? 'purple-500' : 'purple-300'} color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" justifySelf={value === 2 ? 'auto' : null} > {value === 2 ? '1' : ''} </x.div> ))} </x.div> </template> <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:

<> <template preview> <x.div display="grid" gridTemplateColumns={3} gap={4} justifyItems="stretch" > {Array.from({ length: 6 }, (_, index) => index + 1).map((value) => ( <x.div key={value} borderRadius="md" h={16} bg={value === 2 ? 'amber-500' : 'amber-300'} color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" px={4} justifySelf={value === 2 ? 'start' : null} > {value === 2 ? '1' : ''} </x.div> ))} </x.div> </template> <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:

<> <template preview> <x.div display="grid" gridTemplateColumns={3} gap={4} justifyItems="stretch" > {Array.from({ length: 6 }, (_, index) => index + 1).map((value) => ( <x.div key={value} borderRadius="md" h={16} bg={value === 2 ? 'light-blue-500' : 'light-blue-300'} color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" px={4} justifySelf={value === 2 ? 'center' : null} > {value === 2 ? '1' : ''} </x.div> ))} </x.div> </template> <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:

<> <template preview> <x.div display="grid" gridTemplateColumns={3} gap={4} justifyItems="stretch" > {Array.from({ length: 6 }, (_, index) => index + 1).map((value) => ( <x.div key={value} borderRadius="md" h={16} bg={value === 2 ? 'red-500' : 'red-300'} color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" px={4} justifySelf={value === 2 ? 'end' : null} > {value === 2 ? '1' : ''} </x.div> ))} </x.div> </template> <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:

<> <template preview> <x.div display="grid" gridTemplateColumns={3} gap={4} justifyItems="start"> {Array.from({ length: 6 }, (_, index) => index + 1).map((value) => ( <x.div key={value} borderRadius="md" h={16} bg={value === 2 ? 'fuchsia-500' : 'fuchsia-300'} color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" px={4} justifySelf={value === 2 ? 'stretch' : null} > {value === 2 ? '1' : ''} </x.div> ))} </x.div> </template> <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