CSS Grid

CSS Grid Layout is now the recommended way to create layouts with Chassis. Visit the Grid page for details of the utility classes available and example layouts.

The legacy float-based grid will remain in Chassis for some time, but you'll generally find it simpler and cleaner to create layouts with CSS Grid. The migration guide below shows how to replicate common patterns from the float grid.

---

Migration guide

While CSS Grid offers far more powerful layout possibilities, it's also straightforward to create a 12-column grid that matches the legacy float grid. With some simple class changes, you can migrate existing layouts. For example:

<div class="ch-row">
  <div class="ch-col--4">
    <span class="grid-item">ch-col--4</span>
  </div>
  <div class="ch-col--4">
    <span class="grid-item">ch-col--4</span>
  </div>
  <div class="ch-col--4">
    <span class="grid-item">ch-col--4</span>
  </div>
</div>

<div class="ch-grid ch-grid-cols--12 ch-gap--4">
  <div class="ch-grid-cols-span--4">
    <span class="grid-item">ch-grid-cols-span--4</span>
  </div>
  <div class="ch-grid-cols-span--4">
    <span class="grid-item">ch-grid-cols-span--4</span>
  </div>
  <div class="ch-grid-cols-span--4">
    <span class="grid-item">ch-grid-cols-span--4</span>
  </div>
</div>

---

Legacy 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>