Justify Self

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

Auto

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

<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:

<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:

<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:

<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:

<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.