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';`

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 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 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>
	);
}

Edit this page on GitHub

Contributors

Table of Contents

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