Layout

A set of utilities for layouting out a page or content on a page

install	yarn add @clayui/layout
version	3.111.0

Stable 3.111.0 View in Lexicon CHANGELOG

Container
ContainerFluid
Col
ContentCol
ContentRow
ContentSection
Row
Sheet
SheetHeader
SheetFooter
SheetSection

Container

Property	Description
`containerElement` `\| string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>`	Element or component to render for container The default value is 'div'
`fluid` `boolean`	Adds `.container-fluid` class to create a fluid container that doesn't expand beyond a set width
`fluidSize` `'sm' \| 'md' \| 'lg' \| 'xl'`	Adds `.container-fluid-${size}` class to set max width on container.
`formSize` `'sm' \| 'md' \| 'lg' \| 'xl'`	Adds the `.container-form-${formSize}` class to properly space between application controls and the form. This class only modifies the padding on the container.
`view` `boolean`	Adds the `.container-view` class to properly space between application controls and view pages (e.g., Card View, Table View, or List View). This class only modifies the padding on the container.

ContainerFluid

Property	Description
`size` `React.ComponentProps<typeof Container>['fluidSize'] \| false`	The default value is 'xl'

Col

Property	Description
`containerElement` `\| string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>`	Element or component to render for container The default value is 'div'
`lg` `boolean \| number \| 'auto'`	The number of columns to span on large devices
`md` `boolean \| number \| 'auto'`	The number of columns to span on medium devices
`size` `boolean \| number \| 'auto'`	The number of columns to span on all devices
`sm` `boolean \| number \| 'auto'`	The number of columns to span on small devices
`xs` `boolean \| number \| 'auto'`	The number of columns to span on extra-small devices
`xl` `boolean \| number \| 'auto'`	The number of columns to span on extra-large devices

ContentCol

Property	Description
`containerElement` `\| string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>`	Element or component to render for container The default value is 'div'
`expand` `boolean`
`float` `literal`	Provides the benefit of aligning content via flexbox without losing the behavior of floated elements at the expense of extra markup.
`gutters` `boolean`	Applies the `autofit-col-gutters` class
`shrink` `boolean`	Applies the `autofit-col-shrink` class.

ContentRow

Property	Description
`containerElement` `\| string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>`	Element or component to render for container The default value is 'div'
`float` `\| boolean \| 'sm-down' \| 'md-down' \| 'end' \| 'end-sm-down' \| 'end-md-down'`	Provides the benefit of aligning content via flexbox without losing the behavior of floated elements at the expense of extra markup.
`noGutters` `'sm' \| 'x' \| 'y' \| true`
`padded` `boolean`
`verticalAlign` `'center' \| 'end'`	Adds class for aligning items within the row.

ContentSection

Property	Description
`containerElement` `\| string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>`	Element or component to render for container The default value is 'div'

Row

Property	Description
`containerElement` `\| string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>`	Element or component to render for container The default value is 'div'
`gutters` `boolean`	This removes the negative margins from .row and the horizontal padding from all immediate children columns The default value is true
`justify` `'start' \| 'center' \| 'end' \| 'around' \| 'between'`	Horizontal positioning of row contents

Sheet

Property	Description
`containerElement` `\| string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>`	Element or component to render for container The default value is 'div'
`size` `literal`	Setting this to sets a max-width on the sheet

SheetHeader

Property	Description
`containerElement` `\| string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>`	Element or component to render for container The default value is 'div'

SheetFooter

Property	Description
`containerElement` `\| string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>`	Element or component to render for container The default value is 'div'

SheetSection

Property	Description
`containerElement` `\| string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>`	Element or component to render for container The default value is 'div'