Container

Container is the outermost grid wrapper. It establishes the grid context, applies responsive max-width, and centers content.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Grid content (typically Rows)
`component`	`ComponentType`	`'div'`	Custom wrapper element
`css`	`ExtraStyles`	—	Extra CSS for the container
`width`	`ContainerWidth \| function`	From theme	Override max-width
`columns`	`ValueType`	`12`	Total columns in grid
`size`	`ValueType`	—	Default column size (cascades)
`gap`	`ValueType`	—	Column gap (cascades)
`padding`	`ValueType`	—	Column padding (cascades)
`gutter`	`ValueType`	—	Row spacing (cascades)
`colCss`	`ExtraStyles`	—	CSS for all columns (cascades)
`rowCss`	`ExtraStyles`	—	CSS for all rows (cascades)
`colComponent`	`ComponentType`	—	Custom Col component (cascades)
`rowComponent`	`ComponentType`	—	Custom Row component (cascades)
`contentAlignX`	`ContentAlignX`	—	Row alignment (cascades)

Context Shape

Container provides a ContainerContext to all descendant Rows and Cols:

{
  columns: number | number[] | Record<string, number>,
  size: ValueType,
  gap: ValueType,
  padding: ValueType,
  gutter: ValueType,
  colCss: ExtraStyles,
  colComponent: ComponentType,
  rowCss: ExtraStyles,
  rowComponent: ComponentType,
  contentAlignX: ContentAlignX,
}

All values are memoized and only recomputed when props change.

Styling

Container renders as a flex column container:

display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
box-sizing: border-box;

Width Resolution

Container max-width is resolved from (highest priority first):

width prop
theme.grid.container
theme.coolgrid.container

Static Width

<Container width={{ xs: '100%', sm: 540, md: 720, lg: 960, xl: 1140 }}>
  ...
</Container>

Function Width

Transform the theme container widths:

<Container width={(containerWidths) => ({
  ...containerWidths,
  xl: 1280,  // Override just the xl breakpoint
})}>
  ...
</Container>

Examples

Full-Width Container

<Container width="100%">
  <Row gap={16}>
    <Col size={6}>Left</Col>
    <Col size={6}>Right</Col>
  </Row>
</Container>

Container with Cascading Props

<Container
  columns={12}
  gap={16}
  padding={8}
  colCss={(css) => css`
    background: #f5f5f5;
    border-radius: 4px;
  `}
>
  {/* All Rows and Cols inherit these settings */}
  <Row>
    <Col size={4}>Card 1</Col>
    <Col size={4}>Card 2</Col>
    <Col size={4}>Card 3</Col>
  </Row>
</Container>

Custom Container Element

<Container component="main" css={(css) => css`padding: 24px;`}>
  <Row>
    <Col size={12}>Content</Col>
  </Row>
</Container>

On this page