import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as GridStories from "./Grid.stories";

<Meta of={GridStories} />

# Grid

Grid structures layouts with clarity and consistency, organizing content, maintaining alignment, and ensuring a seamless experience across screen sizes. Settings include column configuration, gutter spacing, and responsive behavior.

<Canvas of={GridStories.Documentation}  source={ { code: `
import React from "react";
import { Grid } from "@webiny/admin-ui";

const GridExample = () => {
return (

<Grid gap={"comfortable"} className={"bg-neutral-light p-4"}>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 1</Grid.Column>
  <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
    Col 2<br />
    Span: 3
  </Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 3</Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 4</Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 5</Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 6</Grid.Column>
  <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
    Col 7<br />
    Span: 2
  </Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 8</Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 9</Grid.Column>
</Grid>
); };

export default GridExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Grid/Grid.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={GridStories.Documentation} />

## Usage

```tsx
import React from "react";
import { Grid } from "@webiny/admin-ui";

const GridExample = () => {
  return (
    <Grid gap={"comfortable"} className={"bg-neutral-light p-4"}>
      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
        Col 1
      </Grid.Column>
      <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
        Col 2<br />
        Span: 3
      </Grid.Column>
      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
        Col 3
      </Grid.Column>
      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
        Col 4
      </Grid.Column>
      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
        Col 5
      </Grid.Column>
      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
        Col 6
      </Grid.Column>
      <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
        Col 7<br />
        Span: 2
      </Grid.Column>
      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
        Col 8
      </Grid.Column>
      <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">
        Col 9
      </Grid.Column>
    </Grid>
  );
};

export default GridExample;
```

## Examples

### Spacious Gap

To have more spacing between grid columns, you can use the `gap` prop and set it to `spacious`.

<Canvas of={GridStories.WithGapSpacious}  source={ { code: `
import React from "react";
import { Grid } from "@webiny/admin-ui";

const GridSpaciousExample = () => {
return (

<Grid gap={"spacious"} className={"bg-neutral-light p-4"}>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 1</Grid.Column>
  <Grid.Column span={3} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
    Col 2<br />
    Span: 3
  </Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 3</Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 4</Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 5</Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 6</Grid.Column>
  <Grid.Column span={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
    Col 7<br />
    Span: 2
  </Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 8</Grid.Column>
  <Grid.Column className="bg-primary text-neutral-light p-2 text-md rounded-sm">Col 9</Grid.Column>
</Grid>
); };

    export default GridSpaciousExample;

` } }
/>

### With Offset

With Offset, you can create a grid with a specific offset. The offset is applied to columns, e.g. `<Grid.Column span={8} offset={2}/>`. Please refer to the example - click on **Show code** to see code example.

<Canvas of={GridStories.WithOffset}  source={ { code: `
import React from "react";
import { Grid } from "@webiny/admin-ui";

const GridWithOffsetExample = () => {
return (

<Grid gap={"spacious"} className={"bg-neutral-light p-4"}>

                {/* Row 1 */}
                <Grid.Column span={8} offset={2} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                    Col 1<br/>
                    span: 8<br/>
                    offset: 2
                </Grid.Column>
                <Grid.Column span={2} />

                {/* Row 2 */}
                <Grid.Column span={8} offset={4} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                    Col 1<br/>
                    span: 8<br/>
                    offset: 4
                </Grid.Column>

                {/* Row 3 */}
                <Grid.Column span={10} offset={1} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                    Col 1<br/>
                    span: 8<br/>
                    offset: 4
                </Grid.Column>
                <Grid.Column span={1} />

                {/* Row 4 */}
                <Grid.Column span={12} className="bg-primary text-neutral-light p-2 text-md rounded-sm">
                    Col 1<br/>
                    span: 12
                </Grid.Column>
            </Grid>
        );
    };

    export default GridWithOffsetExample;

` } }
/>

## Horizontal Grids

The grids within the Webiny Design System behave as fixed and fluid elements relevant to the elements on the page.

### Grid types

Webiny Design System use two types of grids: fluid and fixed. Both grid types use breakpoints to determine whether the layout needs to change between viewport sizes.

### Fluid

The fluid grid stretches across an area to fill all available space within the screen, part of the screen or within the specific element if needed.

<img src="/images/storybook/grid/fluid.png" alt="Fluid" />

<img src="/images/storybook/grid/fluid-dashboard.png" alt="Fluid Dashboard" />

### Fixed

The fixed grid applies the ideal maximum width to page or page element.

<img src="/images/storybook/grid/fixed.png" alt="Fixed" />

<img src="/images/storybook/grid/fixed-dashboard.png" alt="Fixed Dashboard" />

## Grid Gutter Sizes

We considered using two main sizes for grid application, to be used dependent on the content type.

### Comfortable (Default)

<img src="/images/storybook/grid/grid-gutter-size-comfortable.png" alt="Comfortable (Default)" />

### Spacious

<img src="/images/storybook/grid/grid-gutter-size-spacious.png" alt="Spacious" />

## Breakpoints

A breakpoint marks the point where a website’s layout adapts to provide the best user experience. In responsive design, the range of each breakpoint defines the ideal number of columns for a given viewport size, along with the suggested widths for margins and gutters.

<img src="/images/storybook/grid/breakpoints.png" alt="Breakpoints" />

## Column Spans

Content should be distributed across a minimum of 3 columns, with the option to extend up to 12 columns. To achieve a range of layouts, vary the number of columns used, allowing for flexible design across different breakpoints.

<img src="/images/storybook/grid/column-spans.png" alt="Column Spans" />

## Column Offsets

Content isn't required to span the full 12 columns. It can cover a smaller number of columns, creating a layout where the content is centered within a 12-column grid.

<img src="/images/storybook/grid/column-offsets.png" alt="Column Offsets" />