Grid Auto Columns

Utilities for controlling the size of implicitly-created grid columns.

React propsCSS Properties
gridAutoColumns={size}grid-auto-columns: {size};

Usage

Use the gridAutoColumns={size} utilities to control the size implicitly-created grid columns.

<x.div display="grid" gridAutoFlow="columns" gridAutoColumns="max-content"> <div>1</div> <div>2</div> <div>3</div> </x.div>

Responsive

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

<x.div display="grid" gridAutoColumns={{ md: 'max-content' }}> {/* ... */} </x.div>

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

Edit this page on GitHub