@workday/canvas-kit-react/dist/es6/layout/lib/Grid.d.ts

The parent module that contains all Workday Canvas Kit React components

import { BoxProps } from './Box';
import { GridStyleProps } from './utils/grid';
export type GridProps = Omit<BoxProps, 'display'> & GridStyleProps;
export type GridItemProps = BoxProps;
/**
 * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
 * It is highly flexible, and can be used on its own or to build other components.
 * `Grid` is built on top of `Box` and has access to all `BoxProps`.
 *
 * @example
 * ```tsx
 * import { Grid } from '@workday/canvas-kit-react/layout';
 *
 * interface CardProps extends GridProps {
 *   // card-specific props
 * }
 *
 * // `Card`'s default values are set using `GridProps`
 * const Card = (props: CardProps) => (
 *   <Grid gridAutoFlow="row" alignItems="start" depth={1} space="m" {...props}>
 *     <h1>Hello, Card!</h1>
 *     <p>This card uses grid to set its layout.</p>
 *   </Grid>
 * );
 *```
 */
export declare const Grid: import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<BoxProps, "display"> & GridStyleProps> & {
    /**
     * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
     *
     * @example
     * ```
     * import { Grid } from '@workday/canvas-kit-react/layout';
     * `Grid` is built on top of `Box` so `<Grid.Item />` gets all `BoxProps` as well.
     *
     * interface CardProps extends GridItemStyleProps {
     *   // card-specific props
     * }
     *
     * // `Card`'s default values are set using `GridItemStyleProps`
     * const Card = (props: CardProps) => (
     *   <Grid.Item gridRowStart="1" gridArea="Card" {...props}>
     *     <h1>Hello, Card!</h1>
     *     <p>This card uses grid child specific props to set its layout.</p>
     *   </Grid.Item>
     * );
     *```
     */
    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("..").BackgroundStyleProps & import("./utils/border/color").BorderColorStyleProps & import("./utils/border/lineStyle").BorderLineStyleProps & import("./utils/border/radius").BorderRadiusStyleProps & import("./utils/border/shorthand").BorderShorthandStyleProps & import("./utils/border/width").BorderWidthStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").GridItemStyleProps & import("..").LayoutStyleProps & import("..").OtherStyleProps & import("..").PositionStyleProps & import("..").SpaceStyleProps & import("..").TextStyleProps & import("@workday/canvas-kit-styling").CSProps>;
};
//# sourceMappingURL=Grid.d.ts.map