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 designed to create a responsive grid of items that will automatically wrap based on the number of children and the minItemWidth.

Installation and Import

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'

API

NameDescriptionDefaultControl
gap
string
-
minItemWidth
string
-
as
unknown
"div"
style
unknown
{}
gutter
-
-
variant
-
-

Gap

The gap prop defines the gap size between elements. Ultimately, the space is controlled by setting the --gap CSS variable.

Default values

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.

Usage examples

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

Custom gap as number (20)
Custom gap as string ("3ch")
size000
size00
size1
size2
size3
size4
size5
size6
size7
size8
size9
size10
size11
size12
size13
size14
size15

Min Item Width

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.

Usage examples

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

Masonry Variant

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.

Usage examples

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

1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga consequuntur corrupti beatae commodi vitae, perspiciatis totam provident architecto doloribus aperiam sapiente, incidunt nihil suscipit voluptatibus tempore est dolor! Iusto, vero.
2. Nulla luctus nisl nec dui auctor volutpat. Phasellus condimentum elementum enim in pharetra. Curabitur eget urna cursus, imperdiet leo eu, elementum leo. Proin laoreet eleifend nisl ut iaculis. Ut dictum est vitae rutrum elementum. Donec dictum ex ac nibh auctor semper. Phasellus sed rhoncus arcu, eu consectetur ipsum. Ut dictum a elit at sollicitudin. Quisque sed augue molestie, auctor purus quis, luctus ipsum. Donec ultrices vel nisi vehicula facilisis. Vestibulum cursus nisi tellus, sit amet sagittis nisl luctus ut.
3. Aenean pulvinar sed turpis sagittis dapibus. Proin id nunc felis. Donec porttitor magna id metus lacinia, quis posuere est ultrices. Cras et massa eu nulla elementum porttitor. Vestibulum sapien nunc, finibus a molestie vitae, mattis et lectus. Aenean hendrerit bibendum turpis. Ut auctor in nulla non dapibus. Pellentesque velit arcu, molestie sed consectetur euismod, semper nec elit. Pellentesque quis ullamcorper felis. Donec quis ex euismod, malesuada ex et, hendrerit lectus. Integer accumsan sollicitudin accumsan. Aliquam nec ante viverra, congue ipsum tincidunt, auctor eros. Morbi tempor eget dolor et hendrerit. Donec eget placerat lorem. Phasellus a accumsan odio.
4. Aenean pulvinar sed turpis sagittis dapibus. Proin id nunc felis. Donec porttitor magna id metus lacinia, quis posuere est ultrices. Cras et massa eu nulla elementum porttitor. Vestibulum sapien nunc, finibus a molestie vitae, mattis et lectus. Aenean hendrerit bibendum turpis. Ut auctor in nulla non dapibus. Pellentesque velit arcu, molestie sed consectetur euismod, semper nec elit. Pellentesque quis ullamcorper felis. Donec quis ex euismod, malesuada ex et, hendrerit lectus. Integer accumsan sollicitudin accumsan. Aliquam nec ante viverra, congue ipsum tincidunt, auctor eros. Morbi tempor eget dolor et hendrerit. Donec eget placerat lorem. Phasellus a accumsan odio.
5. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga consequuntur corrupti beatae commodi vitae, perspiciatis totam provident architecto doloribus aperiam sapiente, incidunt nihil suscipit voluptatibus tempore est dolor! Iusto, vero.
6. Nulla luctus nisl nec dui auctor volutpat. Phasellus condimentum elementum enim in pharetra. Curabitur eget urna cursus, imperdiet leo eu, elementum leo. Proin laoreet eleifend nisl ut iaculis. Ut dictum est vitae rutrum elementum. Donec dictum ex ac nibh auctor semper. Phasellus sed rhoncus arcu, eu consectetur ipsum. Ut dictum a elit at sollicitudin. Quisque sed augue molestie, auctor purus quis, luctus ipsum. Donec ultrices vel nisi vehicula facilisis. Vestibulum cursus nisi tellus, sit amet sagittis nisl luctus ut.