A set of utilities for layouting out a page or content on a page
|install||yarn add @clayui/layout|
Stable3.93.0View in LexiconCHANGELOG
Container vs. Content
When deciding between using
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.
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
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.
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
Rowcan be customized so that its
guttersare removed, and its content can be
Col(column) has various sizing options, from
xs(extra small) to
xl(extra large), as well as a
sizeprop that allows custom sizing to be provided.
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.