@itwin/itwinui-layouts-react/dist/esm/components/Grid/GridItem.d.ts

iTwinUI package that provides React components for most common layouts

import React from 'react';
import { StylingProps } from '../../utils';
import { ResponsiveColumnSpan, ResponsiveColumnStart } from './types';
export declare type GridItemProps = {
    /**
     * Children of the element
     */
    children?: React.ReactNode;
    /**
     * Sets column count for grid item - how many columns this item spans.
     * Max columnSpan is 12.
     *
     * - `number` - spans grid item same amount in all screen sizes;
     * - `ResponsiveColumnSpan` - object to specify grid column span in specific screen sizes;
     *
     * @default 1
     *
     * @example
     * columnSpan={4}
     *
     * @example
     * columnSpan={{
         monitor: 8,
         smallMonitor: 6,
         tablet: 4,
         mobile: 12,
       }}
     */
    columnSpan?: number | ResponsiveColumnSpan;
    /**
     * Sets on which column grid item starts.
     * Eg. When set to 10, grid item starts on 10th column.
     *
     * - `auto` - places grid item in nearest empty suitable grid column in all screen sizes;
     * - `number` - places grid item in specific grid column in all screen sizes;
     * - `ResponsiveColumnStart` - object to specify grid column to place item in specific screen sizes;
     *
     * @default 'auto'
     *
     * @example
     * columnStart={8}
     *
     * @example
     * columnStart='auto'
     *
     * @example
     * columnStart={{
         monitor: 2,
         smallMonitor: 2,
         tablet: 1,
         mobile: 'auto',
        }}
     */
    columnStart?: 'auto' | number | ResponsiveColumnStart;
} & StylingProps;
/**
 * Grid item component to use with our `Grid`.
 * Default size is 1 column. You can change this by providing `columnSpan` prop.
 * Grid item starts at the next available position in grid. To change that provide `columnStart` prop.
 *
 * @example
 * <GridItem
 *   columnSpan={12}
 * />
 * <GridItem
 *   columnSpan={{
       monitor: 8,
       smallMonitor: 6,
       tablet: 4,
       mobile: 12,
     }}
 * />
 *
 * @example
 * <GridItem
 *   columnSpan={4}
 *   columnStart={2}
 * />
 * <GridItem
 *   columnSpan={4}
 *   columnStart={{
       monitor: 2,
       smallMonitor: 2,
       tablet: 1,
       mobile: 'auto',
      }}
 * />
 */
export declare const GridItem: {
    (props: GridItemProps): JSX.Element;
    displayName: string;
};
export default GridItem;