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.

---

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: [xs,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="[xs,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="[xs,sl,sm,md,lg]:ch-col--push-*"></div>
<div class="[xs,sl,sm,md,lg]:ch-col--pull-*"></div>