Grid Template Rows

Utilities for specifying the rows in a grid layout.

Usage

Use the gridTemplateRows={value} utilities to create grids with n equally sized rows.

<x.div display="grid" gridTemplateRows={3} gridAutoFlow="column" 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 gridTemplateRows={{ md: 2 }} to an element would apply the gridTemplateRows={2} utility at medium screen sizes and above.

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

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

Customizing

Grid Template Rows

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

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

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