No Preview

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:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Grid

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.

Usage

When to use

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.

When not to use

Use the Stack component instead for these use cases:

  • Alignment: More options for item alignment.
  • Flex items: Custom flex basis or configure how items stretch and wrap.

Properties

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.

NameDescriptionDefault
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: theme.spacing(minColumnWidth)

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