import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import LinkTo from '@storybook/addon-links/react';
import { Box } from './box.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../utils/storybook/docs-support';

<Meta title="Recipes/Layout" component={Box} />

# Responsive columns

Many of our designs call for columns inside a card, independent of the page level grid. It's tempting to abuse and customize the `Grid`/`GridItem` components for this, but it's important to remember that `Grid` describes the **page level grid** and is not designed to be nested.

For content that needs further columns in a down-tree component, it's better to use the responsive layout facilities afforded by the basic layout manager (`stack`, `stackee`, and `spacing` mixins) instead. Here's a card with three columns that reflows in the small breakpoint:

<Canvas>
  <Story id="recipes-layout--nestable-responsive-columns" />
</Canvas>