What about CSS Grid?

CSS Grid Layout is now available in Chassis! Visit the CSS Grid page for details of the utility classes available and example layouts.

CSS Grid in Chassis is still a work in progress, but we'd recommend using it over the legacy float-based grid where possible. Please share your feedback and issues in the Chassis Teams channel, particularly if you're finding it difficult to create a layout with the current utility classes.

CSS Grid also pairs nicely with flexbox - have a look at the Flex utility classes.

Mobile-first breakpoints

Chassis uses a mobile-first design system. You'll set the base style for mobile, then use modifier classes to change the layout or styling for larger screen sizes. The resolution breakpoints used in Chassis are:

• $xs: 480px
• $sl: 576px
• $sm: 768px
• $md: 992px
• $lg: 1200px

Grid layout

Columns must be inside a row.

<div class="ch-row">
  <div class="ch-col--12 md:ch-col--4">
    <span class="grid-item">Grid</span>
  </div>
  <div class="ch-col--12 md:ch-col--4">
    <span class="grid-item">Grid</span>
  </div>
  <div class="ch-col--12 md:ch-col--4">
    <span class="grid-item">Grid</span>
  </div>
</div>

Centered Grid/Container

The container centres the content with a max-width: 1200px.

<div class="ch-container">
  <div class="ch-row">...</div>
</div>

Offset columns

You can offset your columns using: [sl,sm,md,lg]:ch-col--offset-*

<div class="ch-container">
  <div class="ch-row">
    <div class="md:ch-col--6 md:ch-col--offset-1">
      <span class="grid-item">Offset by 1</span>
    </div>
    <div class="md:ch-col--6 md:ch-col--offset-3">
      <span class="grid-item">Offset by 3</span>
    </div>
    <div class="md:ch-col--6 md:ch-col--offset-5">
      <span class="grid-item">Offset by 5</span>
    </div>
  </div>
</div>

<!-- Responsive eg... -->
<div class="[sl,sm,md,lg]:ch-col--offset-*"></div>

Pull and push columns

You can use push and pull to adjust column layouts.

<div class="ch-container">
  <div class="ch-row">
    <div class="md:ch-col--4">
      <span class="grid-item">ch-col--4</span>
    </div>
    <div class="md:ch-col--4 md:ch-col--push-4">
      <span class="grid-item">ch-col--4 ch-col--push-4</span>
    </div>
  </div>
</div>

<!-- Responsive eg... -->
<div class="[sl,sm,md,lg]:ch-col--push-*"></div>
<div class="[sl,sm,md,lg]:ch-col--pull-*"></div>

Full-bleed utility class

Use ch-full-bleed to escape a ch-container and create a block of content that spans the full window width. You’ll usually add another ch-container child div to centre the content within.

<div class="ch-container">
  <p>Content</p>
  <div class="ch-full-bleed ch-text--center ch-bg--ac-teal">
    <div class="ch-container">
      <p>Full-bleed-panel</p>
    </div>
  </div>
  <p>Content</p>
</div>