Layout

yarn add @clayui/layout

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

Container, Rows, Columns
Autofit
API

Container, Rows, Columns

One of two columns

import ClayLayout from '@clayui/layout';

import ClayLayout from '@clayui/layout';

const Component = () => {
  const colStyles = {
    backgroundColor: "#E7E7ED",
    border: "1px solid #CDCED9",
    paddingBottom: ".75rem",
    paddingTop: ".75rem"
  };

  return (
    <ClayLayout.ContainerFluid view>
      <ClayLayout.Row justify="start">
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
      </ClayLayout.Row>
      <ClayLayout.Row justify="center">
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
      </ClayLayout.Row>
      <ClayLayout.Row justify="end">
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
      </ClayLayout.Row>
      <ClayLayout.Row justify="around">
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
      </ClayLayout.Row>
      <ClayLayout.Row justify="between">
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
      </ClayLayout.Row>
    </ClayLayout.ContainerFluid>
  );
};

render(<Component />);

const Component = () => {
  const colStyles = {
    backgroundColor: "#E7E7ED",
    border: "1px solid #CDCED9",
    paddingBottom: ".75rem",
    paddingTop: ".75rem"
  };
  return (
    <ClayLayout.ContainerFluid view>
      <ClayLayout.Row justify="start">
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
      </ClayLayout.Row>
      <ClayLayout.Row justify="center">
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
      </ClayLayout.Row>
      <ClayLayout.Row justify="end">
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
      </ClayLayout.Row>
      <ClayLayout.Row justify="around">
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
      </ClayLayout.Row>
      <ClayLayout.Row justify="between">
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
        <ClayLayout.Col size={4} style={colStyles}>
          {"One of two columns"}
        </ClayLayout.Col>
      </ClayLayout.Row>
    </ClayLayout.ContainerFluid>
  );
};
render(<Component />);

Autofit

Alberto Calvo, modified 2 hours ago.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

import ClayLayout from '@clayui/layout';

import ClayLayout from '@clayui/layout';

const Component = () => {
  return (
    <ClayLayout.ContentRow padded>
      <ClayLayout.ContentCol>
        <div className="form-check">
          <label className="form-check-label">
            <input className="form-check-input" type="checkbox" value="" />
          </label>
        </div>
      </ClayLayout.ContentCol>
      <ClayLayout.ContentCol expand>
        <ClayLayout.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>
        </ClayLayout.ContentSection>
      </ClayLayout.ContentCol>
      <ClayLayout.ContentCol>
        <svg
          className="lexicon-icon lexicon-icon-ellipsis-v"
          focusable="false"
          role="presentation"
        >
          <use href="/images/icons/icons.svg#ellipsis-v" />
        </svg>
      </ClayLayout.ContentCol>
    </ClayLayout.ContentRow>
  );
};

render(<Component />);

const Component = () => {
  return (
    <ClayLayout.ContentRow padded>
      <ClayLayout.ContentCol>
        <div className="form-check">
          <label className="form-check-label">
            <input className="form-check-input" type="checkbox" value="" />
          </label>
        </div>
      </ClayLayout.ContentCol>
      <ClayLayout.ContentCol expand>
        <ClayLayout.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>
        </ClayLayout.ContentSection>
      </ClayLayout.ContentCol>
      <ClayLayout.ContentCol>
        <svg
          className="lexicon-icon lexicon-icon-ellipsis-v"
          focusable="false"
          role="presentation"
        >
          <use href="/images/icons/icons.svg#ellipsis-v" />
        </svg>
      </ClayLayout.ContentCol>
    </ClayLayout.ContentRow>
  );
};
render(<Component />);

API

Container

Property	Type	Required	Default	Description
containerElement	string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>	false	'div'	Element or component to render for container
fluid	boolean	false		Adds `.container-fluid` class to create a fluid container that doesn't expand beyond a set width
fluidSize	'sm' \| 'md' \| 'lg' \| 'xl'	false		Adds `.container-fluid-${size}` class to set max width on container.
formSize	'sm' \| 'md' \| 'lg' \| 'xl'	false		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	false		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	Type	Required	Default	Description
size	React.ComponentProps<typeof Container>['fluidSize'] \| false	false	'xl'

Col

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

ContentCol

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

ContentRow

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

ContentSection

Property	Type	Required	Default	Description
containerElement	string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>	false	'div'	Element or component to render for container

Row

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

Sheet

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

SheetHeader

Property	Type	Required	Default	Description
containerElement	string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>	false	'div'	Element or component to render for container

SheetFooter

Property	Type	Required	Default	Description
containerElement	string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>	false	'div'	Element or component to render for container

SheetSection

Property	Type	Required	Default	Description
containerElement	string \| React.JSXElementConstructor<{ className: string; [key: string]: any; }>	false	'div'	Element or component to render for container