yarn add storybook-addon-grid makes column grids simple

---

⚙️ Install

yarn add -D storybook-addon-grid

// .storybook/main.js
module.exports = {
  addons: [require.resolve('storybook-addon-grid/preset')],
};

Chromatic users

Include this additional preset to configure the grid lines for your Chromatic screenshots.

// .storybook/main.js
module.exports = {
  addons: [
    require.resolve('storybook-addon-grid/preset'),
    require.resolve('storybook-addon-grid/chromatic'),
  ],
};

🚀 Usage

The grid is controlled with parameters and as such you can define this globally or per story.

The grid can be turned on either via clicking the Grid button in the toolbar, or via a keyboard shortcut Ctrl + G.

Parameters

Column design system is defined by 3 values:

• the number of columns
• the gap between them
• the gutter — minimal margin between the system and the screen
• maximal-width for the system to limit maximum width of all columns as well.

gridOn?: boolean = false

Defines if the grid should be turned on this story by-default. The grid is controlled with a toolbar item, keyboard shortcut which may cause this to not always be on. This will force it to either be on or off when the story is loaded.

columns?: number = 12

The number of columns to render.

gap?: string = '20px'

The gap between columns.

gutter?: string = '50px'

The gap on the left and right side of the columns.

maxWidth?: string = '1024px'

The maximum width our columns should grow.

Global Parameters~

// .storybook/preview.js
export const parameters = {
  grid: {
    gridOn: true,
    columns: 12,
    gap: '20px',
    gutter: '50px',
    maxWidth: '1024px',
  },
};

Per story~

// MyComponent.stories.js

export const Example = () => {...};
Example.parameters = {
    grid: {
        columns: 6,
    },
};

📚 Further Readings

• https://compassofdesign.com/articles/design-principle-1-guides-gutters-and-grids

License

MIT © Marais Rossouw