Grid Template Columns

Utilities for specifying the columns in a grid layout.

Usage

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

<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.