@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
12 lines (11 loc) • 806 B
JavaScript
import * as React from 'react';
import { Grid } from '@workday/canvas-kit-react/layout';
const baseStyles = {
color: 'blackPepper500',
padding: 'xs',
};
export const GridExample = () => (React.createElement(Grid, { gridGap: "xs", gridTemplateAreas: "'head head' 'nav main' 'nav foot'", gridTemplateColumns: "1fr 3fr", gridTemplateRows: "2.5rem minmax(10rem, auto) 2.5rem" },
React.createElement(Grid.Item, { gridArea: "head", backgroundColor: "cinnamon300", ...baseStyles }),
React.createElement(Grid.Item, { gridArea: "nav", backgroundColor: "sourLemon300", ...baseStyles }),
React.createElement(Grid.Item, { gridArea: "main", backgroundColor: "blueberry300", ...baseStyles }),
React.createElement(Grid.Item, { gridArea: "foot", backgroundColor: "cinnamon300", ...baseStyles })));