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.

Columns

The Columns component is designed to create a n-column layout. The complimentary Column component will allow elements to span and offset n-columns.

Examples

Some examples of where you might use a component:

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/columns.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/columns
  ## 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 { Columns } from '@bedrock-layout/columns'
  // or
import { Columns } from '@bedrock-layout/primitives'

// For Solid.js
import { Columns } from '@bedrock-layout/solid'

API

NameDescriptionDefaultControl
gap
string
-
colCount
number
-
as
unknown
"div"
-
columns
unknown
1
style
unknown
{}
gutter
-
-
switchAt
-
-

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-colCount='gap:size3'>
 <Component />
 <Component />
</div>

// Or you can use a custom value directly
<div data-br-columns style="--gap: 3ch">
 <Component />
 <Component />
</div>

// React.js and Solid.js
<Columns gap="size3">
 <Component />
 <Component />
</Columns>

// Or you can use a css value directly
<Columns gap="3ch">
 <Component />
 <Component />
</Columns>

// or you can use a custom property
<Columns gap="--custom-size-4">
 <Component />
 <Component />
</Columns>

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

Columns Prop

The colCount prop defines the number of columns in the grid.

Usage examples

// CSS
<div data-br-columns style="--colCount: 4">
 <Component />
 <Component />
</div>

// React.js and Solid.js
<Columns colCount={4}>
 <Component />
 <Component />
</Columns>

The below example gives us a 4 column layout. By default, each child will take up one column.

Span

The span prop defines the number of columns that a column will span in the grid.

Usage examples

// CSS
// you can span 1 to 12 columns using the `data-br-column` attribute.
<div data-br-columns>
 <div data-br-column="span:3" >
   <Component />
 </div>
 <Component />
</div>

// if you need to span more than 12 columns, you can use the `--span` custom property directly.
// It is recommended that you do this either with inline styles or selecting the bedrock data attribute.
<div data-br-columns>
 <div data-br-column style="--span:13" >
   <Component />
 </div>
 <Component />
</div>

// React.js and Solid.js
<Columns>
 <Column span={3}>
   <Component />
 </Column>
 <Component />
</Columns>

Here, the Column component is wrapping the blue and green Components. It is then setting the blue Component to span 3 columns and the green to span 2

Offset Start And Offset End

The offsetStart and offsetEnd props define the number of columns that a column will offset from it's neighbors.

Usage examples

// CSS
// you can offset 1 to 12 columns using the `data-br-column` attribute.
<div data-br-columns>
 <div data-br-column="offsetStart:1 offsetEnd:2">
   <Component />
 </div>
 <Component />
</div>

// CSS
// if you need to offset more than 12 columns, you can use the `--offset-start` and `--offset-end` custom properties directly.
// It is recommended that you do this either with inline styles or selecting the bedrock data attribute.
<div data-br-columns>
 <div data-br-column style="--offsetStart: 1; --offsetEnd: 2">
   <Component />
 </div>
 <Component />
</div>

// React.js and Solid.js
<Columns>
 <Column offsetStart={1} offsetEnd={2}>
   <Component />
 </Column>
 <Component />
</Columns>

In the example, the blue Component has offsetStart prop with value of 1 and the green Component has an offsetEnd prop with value of 2

Switch At

The switchAt prop defines the breakpoint at which the Columns layout will switch to a Stack layout.

Usage examples

// CSS
// Using the predefined size constants
<div data-br-columns="switchAt:sizeContent2">
 <div data-br-column>
   <Component />
 </div>
 <Component />
</div>

// use the `--switch-at` custom property
// It is recommended that you do this either with inline styles or selecting the bedrock data attribute.
<div data-br-columns style={{ "--switchAt": 45rem }}>
 <div data-br-column>
   <Component />
 </div>
 <Component />
</div>

// React.js and Solid.js
<Columns>
 <Column switchAt="45rem">
   <Component />
 </Column>
 <Component />
</Columns>

The below Columns layout will switch to a Stack layout when its less than 45rem. (Resize the window to see the effect)