@itwin/itwinui-layouts-react
Version:
iTwinUI package that provides React components for most common layouts
27 lines (26 loc) • 1.07 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import React from 'react';
import cx from 'classnames';
import { GridItem } from './GridItem';
/**
* Grid component based on CSS grid.
* Grid has 12 columns across all screen breakpoints to keep consistent layouts.
* Recommended to use `Grid.Item` components as children but can take any `ReactNode` component.
*
* @example
*
* <Grid>
* <Grid.Item />
* <Grid.Item columnSpan={6}/>
* <Grid.Item columnSpan={5}/>
* </Grid>
*/
export var Grid = function (props) {
var className = props.className, style = props.style, children = props.children;
return (React.createElement("div", { className: cx('iui-layouts-grid', className), style: style }, children));
};
Grid.Item = GridItem;
export default Grid;