import { Meta } from '@storybook/addon-docs';

<Meta title="Components/Grid/Grid" />

# Grid

A responsive layout utility component which utilizes [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) to position child elements in a variety of ways. Great for providing mobile-first UI layouts.

Uses the [responsive values](https://theme-ui.com/sx-prop#responsive-values) array syntax and the [Grid from Theme-UI](https://theme-ui.com/components/grid/).

### Required Components

`Grid` should be used to position other components, but there are none that are specifically required. `Box` is used for demonstration below.