Container

The ItsyUI Container is a responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. This is a shell widget and its theme implementation decides whether to use CSS flexbox or grid layouting.

ItsyUI container always uses fluid mode and columns that scale and resize content. A fluid grid’s layout can use breakpoints to determine if the layout needs to change dramatically.


Usage

import { ItsyContainer, ItsyRow, ItsyColumn } from "@itsy-ui/layout";

<ItsyContainer className="container" maxWidth="md">
    <ItsyRow className="row">
			<ItsyColumn className="col" span={6}>
					1 Row 2 Column
			</ItsyColumn>
			<ItsyColumn className="col" span={6}>
					1 Row 2 Column
			</ItsyColumn>
		</ItsyRow>
</ItsyContainer>


API

name type default description
className String additional class name of root node.
style Object {} Inline style object
maxWidth String xl Define maximum width of the container



Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions