Grid Auto Flow

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

React propsCSS Properties
gridAutoFlow={keyword}grid-auto-flow: {keyword};

Usage

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

<> <template preview> <x.div display="grid" gridAutoFlow="column" gridTemplateColumns={3} gridTemplateRows={3} gap={4} > {Array.from({ length: 9 }, (_, index) => index + 1).map((value) => ( <x.div key={value} h={12} borderRadius="md" bg="fuchsia-500" color="white" display="flex" alignItems="center" justifyContent="center" fontSize="2xl" fontWeight="extrabold" > {value} </x.div> ))} </x.div> </template> <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.

Edit this page on GitHub