Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Layout

yarn add @clayui/layout

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

  • Examples
  • API

Stable3.65.1View in LexiconCHANGELOGstorybook demos

  • Container vs. Content
  • Container, Rows, Columns
  • Container Demo
  • Content Demo

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

Copied!
Code Sample (expand to see it)

Content Demo

Copied!
Code Sample (expand to see it)

How can this be improved? Create an issue!