Grid Template Columns

Utilities for specifying the columns in a grid layout.

React propsCSS Properties
gridTemplateColumns={value}grid-template-columns: {value};

Usage

Use the gridTemplateColumns={value} utilities to create grids with n equally sized columns.

<> <template preview> <x.div display="grid" gridTemplateColumns={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" gridTemplateColumns={3} gap={4}> <div>1</div> {/* ... */} <div>9</div> </x.div> </>

Responsive

To control the columns of a grid at a specific breakpoint, use responsive object notation. For example, adding the property gridTemplateColumns={{ md: 2 }} to an element would apply the gridTemplateColumns={2} utility at medium screen sizes and above.

<x.div display="grid" gridTemplateColumns={{ md: 2 }}> {/* ... */} </x.div>

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

Customizing

Grid Template Columns

If you'd like to customize your values for gridTemplateColumns, use the theme.gridTemplateColumns section of your theme.

// theme.js export const theme = { gridTemplateColumns: { + 16: 'repeat(16, minmax(0, 1fr))', }, }

Learn more about customizing the default theme in the theme customization documentation.

Edit this page on GitHub