Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:
The Grid component is a layout component that allows you to create a grid of columns and rows to organize content and elements. It is a wrapper around the CSS Grid specification.
Use the Grid component when you want to create structured and organized layouts where content or elements need to be aligned in rows and columns for clarity and consistency.
Use the Stack
component instead for these use cases:
Note: There is no support for using columns
and minColumnWidth
props at the same time. The correct behaviour is working just with one of them not both.
Name | Description | Default |
---|---|---|
columns | Number of columns ResponsiveProp<1 | 2 | 4 | 3 | 5 | 6 | 8 | 10 | 7 | 9 | 11 | 12> | - |
minColumnWidth | For a responsive layout, fit as many columns while maintaining this minimum column width.
The real width will be calculated based on the theme spacing tokens: ResponsiveProp<1 | 2 | 3 | 5 | 8 | 13 | 21 | 34 | 44 | 55 | 72 | 89 | 144> | - |
gap | Specifies the gutters between columns and rows. It is overwritten when a column or row gap has a value. ResponsiveProp<ThemeSpacingTokens> | - |
alignItems | ResponsiveProp<AlignItems> | - |