What about CSS Grid?

Historically, we didn't use CSS Grid due to a lack of browser support. That's no longer a problem, but it's certainly a challenge to update the Chassis grid system to use CSS Grid while also making it easy for teams to upgrade their applications without significant breaking changes. If you have any ideas for bringing Grid to Chassis, we'd love to hear them!

You might find that you can achieve your layout more easily and with less markup using flexbox rather than the grid system below - have a look at the Flex utility classes for examples.

---

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>