import { default as React } from 'react';
import { ResponsiveValue } from './useBreakpoint';
import { SpacingToken } from './responsive';
import { BoxProps } from './Box';
type SpacingInput = SpacingToken | string | number;
export interface GridProps extends Omit<BoxProps, "display"> {
    /** Number of equal columns (responsive) */
    columns?: ResponsiveValue<number>;
    /** Auto-fit: minimum column width in px. Creates `repeat(auto-fit, minmax(Npx, 1fr))` */
    autoFit?: number;
    /** Auto-fill: minimum column width in px. Creates `repeat(auto-fill, minmax(Npx, 1fr))` */
    autoFill?: number;
    /** Explicit grid-template-columns CSS value */
    template?: ResponsiveValue<string>;
    /** Explicit grid-template-rows CSS value */
    rows?: string;
    /** Gap between grid items */
    gap?: ResponsiveValue<SpacingInput>;
    /** Row gap (overrides gap for rows) */
    rowGap?: ResponsiveValue<SpacingInput>;
    /** Column gap (overrides gap for columns) */
    columnGap?: ResponsiveValue<SpacingInput>;
    /** Align items (cross-axis per cell) */
    align?: "start" | "end" | "center" | "stretch" | "baseline";
    /** Justify items (main-axis per cell) */
    justifyItems?: "start" | "end" | "center" | "stretch";
    /** Align content (cross-axis for the grid as a whole) */
    alignContent?: "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly";
    /** Justify content (main-axis for the grid as a whole) */
    justifyContent?: "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly";
    /** Make grid inline */
    inline?: boolean;
}
export declare const Grid: React.MemoExoticComponent<React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>>;
export default Grid;