import { ElementType, HTMLAttributes } from 'react';
import { ResponsiveStyleValue } from 'theme-ui';
export type GridProps = {
    /** Element type to render. Defaults to `div`, or to `span` if `inline` is `true`. Can also be set to `child` to not render an element at all, applying the grid layout to the child element instead. */
    as?: ElementType | 'child';
    /** Whether `display` should be `inline-grid` instead of `grid`. Defaults to `false`. */
    inline?: ResponsiveStyleValue<boolean>;
    /** Minimum column width. */
    width?: ResponsiveStyleValue<string | number>;
    /** Mode for column sizing, used in conjunction with the `width` prop. Can either be `fit` or `fill`. Defaults to `fit`. */
    repeat?: 'fit' | 'fill';
    /** Number of equally-sized columns, or string with grid layout syntax (e.g. `200px auto 200px`). Cannot be used in conjunction with the `width` prop. */
    columns?: ResponsiveStyleValue<string | number>;
    /** Horizontal alignment of items in their cell. Defaults to `stretch`. */
    justify?: ResponsiveStyleValue<'stretch' | 'start' | 'end' | 'center'>;
    /** Vertical alignment of items in their cell. Defaults to `stretch`. */
    align?: ResponsiveStyleValue<'stretch' | 'start' | 'end' | 'center' | 'baseline'>;
    /** Size of the gap between grid cells (both between columns and between rows). */
    gap?: ResponsiveStyleValue<string | number>;
    /** Size of the gap between columns of the grid. */
    gapX?: ResponsiveStyleValue<string | number>;
    /** Size of the gap between rows of the grid. */
    gapY?: ResponsiveStyleValue<string | number>;
} & HTMLAttributes<HTMLElement>;
/**
 * Base `Grid` component for laying out child elements/components in a CSS Grid layout,
 * with props to control the minimum column width (`width`) or the number of columns (`columns`),
 * the alignment of items in their cell, and the gap between them.
 */
export declare const Grid: import('react').ForwardRefExoticComponent<{
    /** Element type to render. Defaults to `div`, or to `span` if `inline` is `true`. Can also be set to `child` to not render an element at all, applying the grid layout to the child element instead. */
    as?: ElementType | "child";
    /** Whether `display` should be `inline-grid` instead of `grid`. Defaults to `false`. */
    inline?: ResponsiveStyleValue<boolean>;
    /** Minimum column width. */
    width?: ResponsiveStyleValue<string | number>;
    /** Mode for column sizing, used in conjunction with the `width` prop. Can either be `fit` or `fill`. Defaults to `fit`. */
    repeat?: "fit" | "fill";
    /** Number of equally-sized columns, or string with grid layout syntax (e.g. `200px auto 200px`). Cannot be used in conjunction with the `width` prop. */
    columns?: ResponsiveStyleValue<string | number>;
    /** Horizontal alignment of items in their cell. Defaults to `stretch`. */
    justify?: ResponsiveStyleValue<"stretch" | "start" | "end" | "center">;
    /** Vertical alignment of items in their cell. Defaults to `stretch`. */
    align?: ResponsiveStyleValue<"stretch" | "start" | "end" | "center" | "baseline">;
    /** Size of the gap between grid cells (both between columns and between rows). */
    gap?: ResponsiveStyleValue<string | number>;
    /** Size of the gap between columns of the grid. */
    gapX?: ResponsiveStyleValue<string | number>;
    /** Size of the gap between rows of the grid. */
    gapY?: ResponsiveStyleValue<string | number>;
} & HTMLAttributes<HTMLElement> & import('react').RefAttributes<HTMLElement>>;
//# sourceMappingURL=Grid.d.ts.map