import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
import AreaColumnPositioning from './examples/layout/AreaColumnPositioning';
import CustomColumnPositioning from './examples/layout/CustomColumnPositioning';
import CustomColumnWidth from './examples/layout/CustomColumnWidth';
import FullWidthWith3Columns from './examples/layout/FullWidthWith3Columns';
import FullWidthWith3Columns2Rows from './examples/layout/FullWidthWith3Columns2Rows';
import Masonry from './examples/layout/Masonry';
import ResponsiveColumns from './examples/layout/ResponsiveColumns';
import Tiled2and3Columns from './examples/layout/Tiled2and3Columns';
import Tiled4and2Columns from './examples/layout/Tiled4and2Columns';


# Canvas Kit Examples

Below are layout examples to reference as you build your own. For more in-depth information on our
`Grid` component, please reference our
[`Grid` documentation](https://workday.github.io/canvas-kit/?path=/docs/components-layout-grid--docs).

## Area Column Positioning

<ExampleCodeBlock code={AreaColumnPositioning} />

## Custom Column Positioning

<ExampleCodeBlock code={CustomColumnPositioning} />

## Custom Column Width

<ExampleCodeBlock code={CustomColumnWidth} />

## Full Width With 3 Columns

<ExampleCodeBlock code={FullWidthWith3Columns} />

## Full Width With 3 Columns and 2 Rows

<ExampleCodeBlock code={FullWidthWith3Columns2Rows} />

## Masonry

<ExampleCodeBlock code={Masonry} />

## Responsive Columns

<ExampleCodeBlock code={ResponsiveColumns} />

## 3 and 2 Column Tiled View

<ExampleCodeBlock code={Tiled2and3Columns} />

## 4 and 2 Column Tiled View

<ExampleCodeBlock code={Tiled4and2Columns} />