Container

Overview

<Container> is the most basic layout element in Chassis. It contains, pads, and (sometimes) centers the content inside it. A <Grid> works with or without one around it. Containers can be nested, though most layouts don't need a nested container.

Chassis comes with three container variants:

• <Container>, which sets a max-width at each responsive breakpoint
• <Container fluid>, which is width: 100% at all breakpoints
• <Container fluidUntil={breakpoint}>, which is width: 100% until the specified breakpoint

Each variant's max-width follows a different pattern across breakpoints, shown here against the plain <Container> and <Container fluid> baselines.

Default container

The default <Container> class is a responsive, fixed-width container — its max-width changes at each breakpoint.

import { Container } from '@chassis-ui/react'

export const Example = () => {
  return <Container>Default container</Container>
}

Responsive containers

<Container fluidUntil={breakpoint}> renders full width until the given breakpoint is reached, then applies a max-width at that breakpoint and every larger one. <Container fluidUntil="sm">, for example, stays 100% wide until the sm breakpoint, then scales up through md, lg, xl, and 2xl.

import { Container } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <Container fluidUntil="sm">100% wide until sm breakpoint</Container>
      <Container fluidUntil="md">100% wide until md breakpoint</Container>
      <Container fluidUntil="lg">100% wide until lg breakpoint</Container>
      <Container fluidUntil="xl">100% wide until extra lg breakpoint</Container>
      <Container fluidUntil="2xl">100% wide until extra extra lg breakpoint</Container>
    </>
  )
}

Fluid containers

Use <Container fluid> for a full width container, spanning the entire width of the viewport.

import { Container } from '@chassis-ui/react'

export const Example = () => {
  return <Container fluid>Fluid container</Container>
}

API

Container