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 designed to create a responsive grid of items
that will automatically wrap based on the number of children and the minItemWidth
.
First, you must install @bedrock-layout/css
.
yarn add @bedrock-layout/css
Then, you can import the entire CSS or just the component's CSS in your project:
import "@bedrock-layout/css/lib/bedrock-layout.min.css"; // or import "@bedrock-layout/css/lib/components/grid.min.css";
Optionally, you can install the package for your framework of choice (React.js, Solid.js) using your favorite package manager CLI:
## For React.js yarn add @bedrock-layout/grid ## or yarn add @bedrock-layout/primitives ## For Solid.js yarn add @bedrock-layout/solid
Then import the component in your project:
// For React.js import { Grid } from '@bedrock-layout/grid' // or import { Grid } from '@bedrock-layout/primitives' // For Solid.js import { Grid } from '@bedrock-layout/solid'
Name | Description | Default | Control |
---|---|---|---|
gap | string | - | |
minItemWidth | string | - | |
as | unknown | "div" | |
style | unknown | {} | |
gutter | - | - | |
variant | - | - |
The gap
prop defines the gap size between elements.
Ultimately, the space is controlled by setting the --gap
CSS variable.
Bedrock has implemented a default spacing scheme,
but it can be overridden using the ThemeProvider provided by @bedrock-layout/spacing-constants
.
You can also use any valid CSSLength or positive integer.
// CSS // Using the predefined spacing constants <div data-br-grid='gap:size3'> <Component /> <Component /> </div> // Or you can use a custom value directly <div data-br-grid style={{ "--gap": "3ch" }}> <Component /> <Component /> </div> // React.js and Solid.js <Grid gap="size3"> <Component /> <Component /> </Grid> // Or you can use a css value directly <Grid gap="3ch"> <Component /> <Component /> </Grid> // or you can use a custom property <Grid gap="--custom-size-4"> <Component /> <Component /> </Grid>
Here are the possible values for gap
by default:
The minItemWidth
prop defines the width basis of each of the children.
The Grid
will the optimize how many columns and rows are needed based on that value.
// CSS // Using the predefined size constants <div data-br-grid="minItemWidth:sizeXs"> <Component /> <Component /> </div> // Use the `--min-item-width` custom property <div data-br-grid style="--min-item-width: 30ch"> <Component /> <Component /> </div> // React.js and Solid.js <Grid minItemWidth="30ch"> <Component /> <Component /> </Grid>
In the below example, The minItemWidth
is set to 15rem
. As you resize the
window, the Grid will recalculate and potentially change the count of columns and rows.
(Resize window to observe the changes)
The variant
prop can be set to "grid" or "masonry". The default value is "grid".
The masonry
variant will optimize the layout of the children based on the minItemWidth
and the available block space.
Note: The masonry
variant is a new feature coming to CSS. It is not supported in all browsers yet. To see if the feature is supported in your browser, check caniuse.com.
// CSS <div data-br-grid="variant:masonry" style="--min-item-width: 30ch"> <Component /> <Component /> </div> // React.js and Solid.js <Grid variant="masonry" minItemWidth="30ch"> <Component /> <Component /> </Grid>
In the below example, The minItemWidth
is set to 15rem
. As you resize the
window, the Grid will recalculate and potentially change the count of columns and rows.
(Resize window to observe the changes)