Layout

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

install	yarn add @clayui/layout
version
use	`import Layout from '@clayui/layout';`

Table of Contents

Container vs. Content
Building Blocks
Container
Row and Col
ContentRow, ContentCol, and ContentSection
Container Demo
Content Demo
API Reference

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

import {Provider} from '@clayui/core';
import Layout from '@clayui/layout';
import React from 'react';

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

  return (
    <Provider spritemap="/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

import {Provider} from '@clayui/core';
import Layout from '@clayui/layout';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/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="/icons.svg#ellipsis-v" />
            </svg>
          </Layout.ContentCol>
        </Layout.ContentRow>
      </div>
    </Provider>
  );
}

API Reference

Col

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

Parameters

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

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

"sm" | "lg" | "md" | "xl" | "xxl" | "xxxl" | undefined

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

formSize

"sm" | "lg" | "md" | "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, "className" | "size" | "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" | "children" | "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" | "view" | "key" | "formSize"> & React.RefAttributes<HTMLElement>>

Parameters

Properties

size

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

containerElement

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

Element or component to render for 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.

formSize

"sm" | "lg" | "md" | "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.

Returns

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

ContentCol

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

Parameters

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

containerElement

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

Element or component to render for container

float

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

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

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

Horizontal positioning of row contents

Returns

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

Sheet

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

Parameters

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

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

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

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

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

Matuzalém Teles, Bryce Osterhaus, Krešimir Čoko

Last edited May 12, 2025 at 7:56:02 PM

Table of Contents

Container vs. Content
Building Blocks
Container
Row and Col
ContentRow, ContentCol, and ContentSection
Container Demo
Content Demo
API Reference

Layout

Container vs. Content

Building Blocks

Container

Row and Col

ContentRow, ContentCol, and ContentSection

Container Demo

Content Demo

API Reference

Col

Parameters

containerElement

lg

md

size

sm

xs

xl

Returns

Container

Parameters

containerElement

fluid

fluidSize

formSize

view

Returns

ContainerFluid

Parameters

Properties

size

containerElement

view

formSize

Returns

ContentCol

Parameters

containerElement

expand

float

gutters

shrink

Returns

ContentRow

Parameters

containerElement

float

noGutters

padded

verticalAlign

Returns

ContentSection

Parameters

containerElement

Returns

Row

Parameters

containerElement

gutters

justify

Returns

Sheet

Parameters

size

containerElement

Returns

SheetFooter

Parameters

containerElement

Returns

SheetHeader

Parameters

containerElement

Returns

SheetSection

Parameters

containerElement

Returns

SheetRow

Parameters

`Container`

`Row` and `Col`

`ContentRow`, `ContentCol`, and `ContentSection`