# Grid Addon

A utility addon that helps you show grid guidelines behind your use-cases. 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/main.dart
class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook(
      // ...
      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`
- `DeviceFrameAddon`

Addons that should come after the `GridAddon`:

- `AlignmentAddon`