Grid Auto Flow

Utilities for controlling how elements in a grid are auto-placed.

Usage

Use the gridAutoFlow={keyword} utilities to control how the auto-placement algorithm works for a grid layout.

<x.div
  display="grid"
  gridAutoFlow="column"
  gridTemplateColumns={3}
  gridTemplateRows={3}
  gap={4}
>
  <div>1</div>
  {/* ... */}
  <div>9</div>
</x.div>

Responsive

To control the grid-auto-flow property at a specific breakpoint, use responsive object notation. For example, adding the property gridAutoFlow={{ md: "column" }} to an element would apply the gridAutoFlow="column" utility at medium screen sizes and above.

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

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