@clayui/layout

ClayLayout component

Usage no npm install needed!

<script type="module">
  import clayuiLayout from 'https://cdn.skypack.dev/@clayui/layout';
</script>

README

title: 'Layout' description: 'A set of utilities for layouting out a page or content on a page' lexiconDefinition: 'https://liferay.design/lexicon/foundations/grid/' packageNpm: '@clayui/layout'

import {LayoutContainer, LayoutContent} from '$packages/clay-layout/docs/index';

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

Content Demo