Skip to main content

Chassis v5.11.0

Grid

Added 5.7.0 Updated 5.11.0

The core building blocks for creating layouts.

Grid layout

Establish the parent container for a grid layout. Each child element will be considered a grid item.

<div class="ch-grid">...</div>

<!-- Responsive -->
<div class="[xs,sl,sm,md,lg]:ch-grid"></div>

Grid template columns

Utilities for specifying the number of columns (1-12) in a grid layout.

<div class="ch-grid-cols--1">1 column</div>
<div class="ch-grid-cols--2">2 columns</div>
<div class="ch-grid-cols--3">3 columns</div>
...
<div class="ch-grid-cols--12">12 columns</div>

<!-- Responsive -->
<div class="[xs,sl,sm,md,lg]:ch-grid-cols--[1-12]"></div>

Grid template rows

Utilities for specifying the number of rows (1-12) in a grid layout.

<div class="ch-grid-rows--1">1 column</div>
<div class="ch-grid-rows--2">2 rows</div>
<div class="ch-grid-rows--3">3 rows</div>
...
<div class="ch-grid-rows--12">12 rows</div>

<!-- Responsive -->
<div class="[xs,sl,sm,md,lg]:ch-grid-cols--[1-12]"></div>

Grid gap

Utilities for setting the spacing between items, applied to both column and row spacing.

<div class="ch-gap--1">Gap 6px 6px</div>
<div class="ch-gap--2">Gap 12px 12px</div>
<div class="ch-gap--3">Gap 18px 18px</div>
...
<div class="ch-gap--12">Gap 72px 72px</div>

<!-- Responsive -->
<div class="[xs,sl,sm,md,lg]:ch-gap--[1-12]"></div>

Column gap

Utilities for setting the spacing between columns only.

<div class="ch-col-gap--1">Column-gap 6px</div>
<div class="ch-col-gap--2">Column-gap 12px</div>
<div class="ch-col-gap--3">Column-gap 18px</div>
...
<div class="ch-col-gap--12">Column-gap 72px</div>

<!-- Responsive -->
<div class="[xs,sl,sm,md,lg]:ch-col-gap--[1-12]"></div>

Row gap

Utilities for setting the spacing between rows only.

<div class="ch-row-gap--1">Row-gap 6px</div>
<div class="ch-row-gap--2">Row-gap 12px</div>
<div class="ch-row-gap--3">Row-gap 18px</div>
...
<div class="ch-row-gap--12">Row-gap 72px</div>

<!-- Responsive -->
<div class="[xs,sl,sm,md,lg]:ch-row-gap--[1-12]"></div>

Span multiple columns

Utilities for setting how many columns an item takes up.

<div class="ch-grid-cols-span--1">Span 1 column</div>
<div class="ch-grid-cols-span--2">Span 2 columns</div>
<div class="ch-grid-cols-span--3">Span 3 columns</div>
...
<div class="ch-grid-cols-span--12">Span 12 columns</div>

<!-- Responsive -->
<div class="[xs,sl,sm,md,lg]:ch-grid-cols-span--[1-12]"></div>

Span multiple rows

Utilities for setting how many rows an item takes up.

<div class="ch-grid-rows-span--1">Span 1 row</div>
<div class="ch-grid-rows-span--2">Span 2 rows</div>
<div class="ch-grid-rows-span--3">Span 3 rows</div>
...
<div class="ch-grid-rows-span--12">Span 12 rows</div>

<!-- Responsive -->
<div class="[xs,sl,sm,md,lg]:ch-grid-rows-span--[1-12]"></div>

Example CSS Grid layouts

Simple grid

Use ch-grid-cols--[1-12] utilities to create a grid layout with equally sized columns.

01
02
03
04
05
06
07
08
09
10
<div class="ch-grid ch-grid-cols--4 ch-gap--2">
  <div class="item-styles">01</div>
  <div class="item-styles">02</div>
  <div class="item-styles">03</div>
  ...
  <div class="item-styles">10</div>
</div>

Simple row-based grid

Use ch-grid-rows--[1-12] utilities to specify the number of rows in a layout. You'll need to add ch-grid-flow--column which will fill the columns first (i.e. downwards).

01
02
03
04
05
06
07
08
09
10
<div class="ch-grid ch-grid-rows--4 ch-grid-flow--column ch-gap--2">
  <div class="item-styles">01</div>
  <div class="item-styles">02</div>
  <div class="item-styles">03</div>
  ...
  <div class="item-styles">10</div>
</div>

Responsive grid

Add a media query prefix to ch-grid-cols--[1-12] to only apply the grid layout at that size and above. (Reduce the browser width to see it in action.)

Step 1

Get your free, instant online quote

Enter your car’s registration, the mileage, some details about the condition of your car and the calculator does the rest!

Step 2

Book your appointment

Locate your nearest local branch, pick a time and date that suits you, then book your appointment.

Step 3

Sell your car and get paid

We’ll check over your car at your chosen branch, run through any paperwork and confirm your valuation. We'll then process your payment within 3 working days!

<div class="ch-grid md:ch-grid-cols--3 ch-gap--2 md:ch-gap--3">
  <div class="ch-rounded--lg ch-bg--grey-2 ch-pa--2 sm:ch-pa--3">
    <span class="ch-chip ch-chip--yellow ch-chip--lg ch-mb--2">Step 1</span>
    <h3>Get your free, instant online quote</h3>
    <p class="ch-body ch-mb--0">
      Enter your car’s registration, the mileage, some details about the condition of your car and
      the calculator does the rest!
    </p>
  </div>
  <div class="ch-rounded--lg ch-bg--grey-2 ch-pa--2 sm:ch-pa--3">
    <span class="ch-chip ch-chip--yellow ch-chip--lg ch-mb--2">Step 2</span>
    <h3>Book your appointment</h3>
    <p class="ch-body ch-mb--0">
      Locate your nearest local branch, pick a time and date that suits you, then book your
      appointment.
    </p>
  </div>
  <div class="ch-rounded--lg ch-bg--grey-2 ch-pa--2 sm:ch-pa--3">
    <span class="ch-chip ch-chip--yellow ch-chip--lg ch-mb--2">Step 3</span>
    <h3>Sell your car in Aberdeen</h3>
    <p class="ch-body ch-mb--0">
      We’ll check over your car at your chosen branch, run through any paperwork and confirm your
      valuation. We'll then process your payment within 3 working days!
    </p>
  </div>
</div>

2 columns at mobile, 4 columns at desktop

You can combine media query prefixes and different column utilties to create more complex layouts.

Abarth
Alfa Romeo
Alpine
BMW
BYD
Citroën
Corvette
Cupra
Dacia
DS
Fiat
Genesis 
<div class="ch-grid ch-grid-cols--2 md:ch-grid-cols--4 ch-gap--2">
  <div class="ch-rounded ch-bg--grey-1 ch-ba--1 ch-bc--grey-3 ch-pa--2 ch-text--center">
    <span class="ch-fw--500">Abarth</span>
  </div>
  <div class="ch-rounded ch-bg--grey-1 ch-ba--1 ch-bc--grey-3 ch-pa--2 ch-text--center">
    <span class="ch-fw--500">Alfa Romeo</span>
  </div>
  <div class="ch-rounded ch-bg--grey-1 ch-ba--1 ch-bc--grey-3 ch-pa--2 ch-text--center">
    <span class="ch-fw--500">Alpine</span>
  </div>
  ...
</div>

Consistent column and row gaps

Use ch-gap--[1-12] to control the spacing between both columns and rows.

01
02
03
04
<div class="ch-grid ch-grid-cols--2 ch-gap--3">
  <div class="item-styles">01</div>
  <div class="item-styles">02</div>
  <div class="item-styles">03</div>
  <div class="item-styles">04</div>
</div>

Independent column and row gaps

Use ch-col-gap--[1-12] and ch-row-gap--[1-12] to control the spacing between columns and rows separately.

01
02
03
04
05
06
<div class="ch-grid ch-grid-cols--3 ch-col-gap--4 ch-row-gap--2">
  <div class="item-styles">01</div>
  <div class="item-styles">02</div>
  <div class="item-styles">03</div>
  <div class="item-styles">04</div>
  <div class="item-styles">05</div>
  <div class="item-styles">06</div>
</div>

Span multiple columns

Use ch-grid-cols-span--[1-12] on child elements to have them span multiple columns.

Header (span 4)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
<div class="ch-grid ch-grid-cols--4 ch-col-gap--4 ch-row-gap--2">
  <div class="header-styles ch-grid-cols-span--4">Header</div>
  <div class="item-styles">Item 1</div>
  <div class="item-styles">Item 2</div>
  <div class="item-styles">Item 3</div>
  ...
  <div class="item-styles">Item 8</div>
</div>

Span multiple rows

Use ch-grid-rows-span--[1-12] on child elements to have them span multiple rows. You can then apply flex utilities to align content within.

Sidebar (span 3)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="ch-grid ch-grid-rows--3 ch-grid-flow--column ch-gap--2">
  <div class="sidebar-styles ch-grid-rows-span--3 ch-display--flex ch-align-items--center ch-justify-content--center">
    Sidebar
  </div>
  <div class="item-styles">Item 1</div>
  <div class="item-styles">Item 2</div>
  <div class="item-styles">Item 3</div>
  <div class="item-styles">Item 4</div>
  <div class="item-styles">Item 5</div>
  <div class="item-styles">Item 6</div>
</div>