Layout

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

installyarn add @clayui/layout
versionNPM Version
useimport Layout from '@clayui/layout';

Table of Contents

Container vs. Content

When deciding between using Container vs Content, the big picture is that you typically use Container for structuring page layouts and then you would use Content components for structuring content within the page layout.

Building Blocks

To provide basic building blocks for building layouts, we made Clay Layout very flexible with it’s offerings of containers, rows and columns. All of these components allow for a custom HTML element to be used via the containerElement prop.

Container

Low-level component that serves as a wrapper of smaller building blocks like rows and columns. It is also used as a basis for a high-level variant ContainerFluid which is a Container without a fixed width.

Row and Col

These are self-explanatory, their purpose is to structure content inside them horizontally, or vertically. They are the next component in a typical DOM structure under a Container.

  • Row can be customized so that its gutters are removed, and its content can be justified .
  • Col (column) has various sizing options, from xs (extra small) to xl (extra large), as well as a size prop that allows custom sizing to be provided.

ContentRow, ContentCol, and ContentSection

Small container components to be used as direct wrappers of your content. These elements are the lowest in the container structure while also serving layouting capabilities.

Container Demo

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Layout from '@clayui/layout';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const colStyles = {
		backgroundColor: '#E7E7ED',
		border: '1px solid #CDCED9',
		paddingBottom: '.75rem',
		paddingTop: '.75rem',
	};

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Layout.ContainerFluid view>
					<Layout.Row justify="start">
						<Layout.Col size={4} style={colStyles}>
							{'One of two columns'}
						</Layout.Col>
						<Layout.Col size={4} style={colStyles}>
							{'One of two columns'}
						</Layout.Col>
					</Layout.Row>
					<Layout.Row justify="center">
						<Layout.Col size={4} style={colStyles}>
							{'One of two columns'}
						</Layout.Col>
						<Layout.Col size={4} style={colStyles}>
							{'One of two columns'}
						</Layout.Col>
					</Layout.Row>
					<Layout.Row justify="end">
						<Layout.Col size={4} style={colStyles}>
							{'One of two columns'}
						</Layout.Col>
						<Layout.Col size={4} style={colStyles}>
							{'One of two columns'}
						</Layout.Col>
					</Layout.Row>
					<Layout.Row justify="around">
						<Layout.Col size={4} style={colStyles}>
							{'One of two columns'}
						</Layout.Col>
						<Layout.Col size={4} style={colStyles}>
							{'One of two columns'}
						</Layout.Col>
					</Layout.Row>
					<Layout.Row justify="between">
						<Layout.Col size={4} style={colStyles}>
							{'One of two columns'}
						</Layout.Col>
						<Layout.Col size={4} style={colStyles}>
							{'One of two columns'}
						</Layout.Col>
					</Layout.Row>
				</Layout.ContainerFluid>
			</div>
		</Provider>
	);
}

Content Demo

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import Layout from '@clayui/layout';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Layout.ContentRow padded>
					<Layout.ContentCol>
						<div className="form-check">
							<label className="form-check-label">
								<input
									className="form-check-input"
									type="checkbox"
									value=""
								/>
							</label>
						</div>
					</Layout.ContentCol>
					<Layout.ContentCol expand>
						<Layout.ContentSection>
							<h6>
								<span className="text-truncate-inline">
									<span className="text-truncate">
										Alberto Calvo, modified 2 hours ago.
									</span>
								</span>
							</h6>
							<p>
								<span className="text-truncate-inline">
									<a className="text-truncate" href="#1">
										ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
									</a>
								</span>
							</p>
						</Layout.ContentSection>
					</Layout.ContentCol>
					<Layout.ContentCol>
						<svg
							className="lexicon-icon lexicon-icon-ellipsis-v"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#ellipsis-v" />
						</svg>
					</Layout.ContentCol>
				</Layout.ContentRow>
			</div>
		</Provider>
	);
}

API Reference

Col

React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLElement>>
Parameters
Properties

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

lg

TColSize | undefined

The number of columns to span on large devices

md

TColSize | undefined

The number of columns to span on medium devices

size

TColSize | undefined

The number of columns to span on all devices

sm

TColSize | undefined

The number of columns to span on small devices

xs

TColSize | undefined

The number of columns to span on extra-small devices

xl

TColSize | undefined

The number of columns to span on extra-large devices

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

Container

React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLElement>>
Parameters
Properties

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

fluid

boolean | undefined

Adds .container-fluid class to create a fluid container that doesn't expand beyond a set width

fluidSize

"lg" | "md" | "sm" | "xl" | undefined

Adds .container-fluid-${size} class to set max width on container.

formSize

"lg" | "md" | "sm" | "xl" | undefined

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 | undefined

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.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

ContainerFluid

React.ForwardRefExoticComponent<Pick<IProps, "children" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "containerElement" | "size" | "formSize" | "view" | "key"> & React.RefAttributes<HTMLElement>>
Parameters
Properties

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

size

false | "lg" | "md" | "sm" | "xl" | undefined

formSize

"lg" | "md" | "sm" | "xl" | undefined

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 | undefined

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.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

ContentCol

React.ForwardRefExoticComponent<IContentColProps & React.RefAttributes<HTMLElement>>
Parameters
Properties

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

expand

boolean | undefined

float

"end" | undefined

Provides the benefit of aligning content via flexbox without losing the behavior of floated elements at the expense of extra markup.

gutters

boolean | undefined

Applies the autofit-col-gutters class

shrink

boolean | undefined

Applies the autofit-col-shrink class.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

ContentRow

React.ForwardRefExoticComponent<IContentRowProps & React.RefAttributes<HTMLElement>>
Parameters
Properties

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

float

boolean | "end" | "sm-down" | "md-down" | "end-sm-down" | "end-md-down" | undefined

Provides the benefit of aligning content via flexbox without losing the behavior of floated elements at the expense of extra markup.

noGutters

true | "sm" | "x" | "y" | undefined

padded

boolean | undefined

verticalAlign

"end" | "center" | undefined

Adds class for aligning items within the row.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

ContentSection

React.ForwardRefExoticComponent<IColSectionProps & React.RefAttributes<HTMLElement>>
Parameters
Properties

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

Row

React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLElement>>
Parameters
Properties

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

gutters

boolean | undefined

This removes the negative margins from .row and the horizontal padding from all immediate children columns

justify

"end" | "center" | "start" | "around" | "between" | undefined

Horizontal positioning of row contents

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

Sheet

React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLElement>>
Parameters
Properties

size

"lg" | undefined

Setting this to sets a max-width on the sheet

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
React.ForwardRefExoticComponent<IContainerProps & React.RefAttributes<HTMLElement>>
Parameters
Properties

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

SheetHeader

React.ForwardRefExoticComponent<IContainerProps & React.RefAttributes<HTMLElement>>
Parameters
Properties

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

SheetSection

React.ForwardRefExoticComponent<IContainerProps & React.RefAttributes<HTMLElement>>
Parameters
Properties

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null

SheetRow

React.ForwardRefExoticComponent<IContainerProps & React.RefAttributes<HTMLElement>>
Parameters
Properties

containerElement

string | React.JSXElementConstructor<{ [key: string]: any; className: string; }> | undefined

Element or component to render for container

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub

Contributors

Table of Contents