import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';
import { Grid } from './grid.component';
import {
  FlowPropsTable,
  ExternalReferenceLink,
} from '../../../../utils/storybook/docs-support';

# Page-Level Responsive Columns

Grid is a page-level construct - it defines the 12-column layout of the page as defined by the design team.
Typically it is used to define the overall columnar layout of a screen.

**Note that Grids are not designed to be nested**.

## One-Column Layout

<Story id="recipes-layout-page-level-responsive-columns--one-column-layout" />

## Two-Column Layout

<Story id="recipes-layout-page-level-responsive-columns--two-column-layout" />