Justify Items

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

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.