# Grid Addon

A utility addon that helps you show grid guidelines behind your stories. This is useful for
designers and developers to ensure that their components are aligned correctly and follow the design guidelines.

## Usage

```dart title=widgetbook/lib/widgetbook.config.dart
final config = Config(
  // ...
  addons: [
    GridAddon(10), // [!code highlight]
  ],
);
```

## Order

Since the [order of addons](/addons/overview#order-of-addons) matters, here are some guidelines to follow when using the `GridAddon`:

Addons that should come before the `GridAddon`:

- `ViewportAddon`

Addons that should come after the `GridAddon`:

- `AlignmentAddon`

## Mode

The `GridAddon` has no adjustable value, so it has no corresponding [Mode](/addons/modes). The grid always renders behind every story and scenario.