react/pages/en-us/components/grid.mdx

import { Layout, Playground, Attributes } from 'lib/components'
import { Grid, Card } from 'components'
import PlaygroundTitle from 'lib/components/playground/title'

export const meta = {
  title: 'Grid',
  group: 'Layout',
}

## Grid

Powerful fluid style layout container.

The `Grid` component uses **dynamic CSS media query** to implement responsive layout, It has ultra-high performance
and very small size. Of course, it still supports dynamic props and custom breakpoints.

<Playground
  desc="Dynamically scale container width while maintaining spacing."
  scope={{ Grid, Card }}
  code={`
<Grid.Container gap={2} justify="center" height="100px">
  <Grid xs={6}><Card shadow width="100%" /></Grid>
  <Grid xs={6}><Card shadow width="100%" /></Grid>
  <Grid xs={6}><Card shadow width="100%" /></Grid>
</Grid.Container>
`}
/>

<Playground
  title="Fluid layout"
  desc="Containers for wrapping and scaling."
  scope={{ Grid, Card }}
  code={`
<Grid.Container gap={2} justify="center">
  <Grid xs={24}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={12}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={12}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={6}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={6}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={6}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={6}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={6}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={12}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={6}><Card shadow width="100%" height="50px" /></Grid>
</Grid.Container>
`}
/>

<Playground
  title="Responsive layout"
  desc="Use different layouts for different screen widths."
  scope={{ Grid, Card }}
  code={`
<Grid.Container gap={2} justify="center">
  <Grid xs={24} md={12}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={12} md={12}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={12} md={6}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={12} md={6}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={12} md={6}><Card shadow width="100%" height="50px" /></Grid>
</Grid.Container>
`}
/>

<Playground
  title="Hide elements"
  desc="Hide elements when unit size is 0."
  scope={{ Grid, Card }}
  code={`
<Grid.Container gap={2} justify="center">
  <Grid xs={12} sm={0}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={12} sm={0}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={24}><Card shadow width="100%" height="50px" /></Grid>
  <Grid xs={24}><Card shadow width="100%" height="50px" /></Grid>
</Grid.Container>
`}
/>

<Playground
  title="Auto width"
  desc="Auto fill remaining width."
  scope={{ Grid, Card }}
  code={`
<>
  <Grid.Container gap={2} justify="center">
    <Grid xs><Card shadow width="100%" height="50px" /></Grid>
    <Grid xs><Card shadow width="100%" height="50px" /></Grid>
    <Grid xs><Card shadow width="100%" height="50px" /></Grid>
  </Grid.Container>
  <Grid.Container gap={2} justify="center">
    <Grid xs><Card shadow width="100%" height="50px" /></Grid>
    <Grid xs={12}><Card shadow width="100%" height="50px" /></Grid>
    <Grid xs><Card shadow width="100%" height="50px" /></Grid>
  </Grid.Container>
</>
`}
/>

<PlaygroundTitle
  title="custom breakpoints"
  desc="Override the default breakpoints of the `@geist-ui/react`."
/>

```tsx
const breakpoints: GeistUIThemesBreakpoints = {
  xs: { min: '0', max: '650px' },
  sm: { min: '650px', max: '900px' },
  md: { min: '900px', max: '1280px' },
  lg: { min: '1280px', max: '1920px' },
  xl: { min: '1920px', max: '10000px' },
}

const App = () => {
  const myTheme = Themes.createFromLight({
    type: 'myTheme',
    breakpoints,
  })
  return (
    <GeistProvider themes={[myTheme]} themeType="myTheme">
      <CssBaseline />
      <AppComponent />
    </GeistProvider>
  )
}
```

<Attributes edit="/pages/en-us/components/grid.mdx">
<Attributes.Title>Grid.Props</Attributes.Title>

| Attribute        | Description                                           | Type             | Accepted values               | Default      |
| ---------------- | ----------------------------------------------------- | ---------------- | ----------------------------- | ------------ |
| **justify**      | CSS "justify-content" property                        | `Justify`        | [Justify](#justify)           | `flex-start` |
| **alignItems**   | CSS "align-items" property                            | `AlignItems`     | [AlignItems](#alignitems)     | `stretch`    |
| **alignContent** | CSS "align-content" property                          | `AlignContent`   | [AlignContent](#aligncontent) | `flex-start` |
| **direction**    | CSS "flex-direction" property                         | `Direction`      | [Direction](#direction)       | `row`        |
| **xs**           | width of grid, for `xs` breakpoints and wider screens | `number`         | `0 - 24`, `boolean`           | `false`      |
| **sm**           | width of grid, for `sm` breakpoints and wider screens | `number`         | `0 - 24`, `boolean`           | `false`      |
| **md**           | width of grid, for `md` breakpoints and wider screens | `number`         | `0 - 24`, `boolean`           | `false`      |
| **lg**           | width of grid, for `lg` breakpoints and wider screens | `number`         | `0 - 24`, `boolean`           | `false`      |
| **xl**           | width of grid, for `xl` breakpoints and wider screens | `number`         | `0 - 24`, `boolean`           | `false`      |
| ...              | native props                                          | `HTMLAttributes` | `'id', 'className', ...`      | -            |

<Attributes.Title>Grid.Container.Props</Attributes.Title>

| Attribute | Description              | Type               | Accepted values           | Default |
| --------- | ------------------------ | ------------------ | ------------------------- | ------- |
| **gap**   | spacing of children      | `number` / `float` | -                         | 0       |
| **wrap**  | CSS "flex-wrap" property | `Wrap`             | [Wrap](#wrap)             | `wrap`  |
| ...       | Grid props               | `Grid.Props`       | [Grid.Props](#grid.props) | -       |

<Attributes.Title>Justify</Attributes.Title>

```ts
type Justify =
  | 'flex-start'
  | 'center'
  | 'flex-end'
  | 'space-between'
  | 'space-around'
  | 'space-evenly'
```

<Attributes.Title>AlignItems</Attributes.Title>

```ts
type AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'
```

<Attributes.Title>AlignContent</Attributes.Title>

```ts
type AlignContent =
  | 'stretch'
  | 'center'
  | 'flex-start'
  | 'flex-end'
  | 'space-between'
  | 'space-around'
```

<Attributes.Title>Direction</Attributes.Title>

```ts
type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse'
```

<Attributes.Title>Wrap</Attributes.Title>

```ts
type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse'
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>