Skip to main content

Chassis v5.7.0

CSS Grid utilities

Beta Added 5.7.0

CSS Grid utility classes.

Grid template columns

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

<div class="ch-grid-cols--1">1 column</div>
<!-- grid-template-columns: repeat(1, 1fr); -->

<div class="ch-grid-cols--2">2 columns</div>
<!-- grid-template-columns: repeat(2, 1fr); -->

<div class="ch-grid-cols--3">3 columns</div>
<!-- grid-template-columns: repeat(3, 1fr); -->

...

<div class="ch-grid-cols--10">10 columns</div>
<!-- grid-template-columns: repeat(10, 1fr); -->

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

Grid template rows

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

<div class="ch-grid-rows--1">1 column</div>
<!-- grid-template-rows: repeat(1, 1fr); -->

<div class="ch-grid-rows--2">2 rows</div>
<!-- grid-template-rows: repeat(2, 1fr); -->

<div class="ch-grid-rows--3">3 rows</div>
<!-- grid-template-rows: repeat(3, 1fr); -->

...

<div class="ch-grid-rows--10">10 rows</div>
<!-- grid-template-rows: repeat(10, 1fr); -->

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

Grid gap

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

<div class="ch-gap--1">Gap 6px 7px</div>
<!-- gap: $v $h; -->

<div class="ch-gap--2">Gap 12px 14px</div>
<!-- gap: $v*2 $h*2; -->

<div class="ch-gap--3">Gap 18px 21px</div>
<!-- gap: $v*3 $h*3; -->

...

<div class="ch-gap--10">Gap 60px 70px</div>
<!-- gap: $v*10 $h*10; -->

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

Column gap

Utilities for controlling spacing between columns only.

<div class="ch-col-gap--1">Column gap 7px</div>
<!-- column-gap: $h; -->

<div class="ch-col-gap--2">Column gap 14px</div>
<!-- column-gap: $h*2; -->

<div class="ch-col-gap--3">Column gap 21px</div>
<!-- column-gap: $h*3; -->

...

<div class="ch-col-gap--10">Column gap 70px</div>
<!-- column-gap: $h*10; -->

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

Row gap

Utilities for controlling spacing between rows only.

<div class="ch-row-gap--1">Row gap 6px</div>
<!-- row-gap: $h; -->

<div class="ch-row-gap--2">Row gap 12px</div>
<!-- row-gap: $h*2; -->

<div class="ch-row-gap--3">Row gap 18px</div>
<!-- row-gap: $h*3; -->

...

<div class="ch-row-gap--10">Row gap 60px</div>
<!-- row-gap: $h*10; -->

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

Span multiple columns

Utilities for controlling how many columns an item takes up.

<div class="ch-grid-cols-span--1">Span 1 column</div>
<!-- grid-column: span 1; -->

<div class="ch-grid-cols-span--2">Span 2 columns</div>
<!-- grid-column: span 2; -->

<div class="ch-grid-cols-span--3">Span 3 columns</div>
<!-- grid-column: span 3; -->

...

<div class="ch-grid-cols-span--10">Span 10 columns</div>
<!-- grid-column: span 10; -->

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

Span multiple rows

Utilities for controlling how many rows an item takes up.

<div class="ch-grid-rows-span--1">Span 1 row</div>
<!-- grid-row: span 1; -->

<div class="ch-grid-rows-span--2">Span 2 rows</div>
<!-- grid-row: span 2; -->

<div class="ch-grid-rows-span--3">Span 3 rows</div>
<!-- grid-row: span 3; -->

...

<div class="ch-grid-rows-span--10">Span 10 rows</div>
<!-- grid-row: span 10; -->

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

Example CSS Grid layouts

Simple grid

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

01
02
03
04
05
06
07
08
09
10
<div class="ch-display--grid ch-grid-cols--4 ch-gap--2">
  <div class="ch-rounded ch-bg--ac-teal ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">01</div>
  <div class="ch-rounded ch-bg--ac-teal ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">02</div>
  <div class="ch-rounded ch-bg--ac-teal ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">03</div>
  ...
  <div class="ch-rounded ch-bg--ac-teal ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">10</div>
</div>

Simple row-based grid

Use ch-grid-rows--[1-10] 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-display--grid ch-grid-rows--4 ch-grid-flow--column ch-gap--2">
  <div class="ch-rounded ch-bg--ac-violet ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">01</div>
  <div class="ch-rounded ch-bg--ac-violet ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">02</div>
  <div class="ch-rounded ch-bg--ac-violet ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">03</div>
  ...
  <div class="ch-rounded ch-bg--ac-violet ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">10</div>
</div>

Responsive grid

Add a media query prefix to ch-grid-cols--[1-10] 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-display--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-display--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-10] to control the spacing between both columns and rows.

01
02
03
04
<div class="ch-display--grid ch-grid-cols--2 ch-gap--3">
  <div class="ch-rounded ch-bg--ac-magenta ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">01</div>
  <div class="ch-rounded ch-bg--ac-magenta ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">02</div>
  <div class="ch-rounded ch-bg--ac-magenta ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">03</div>
  <div class="ch-rounded ch-bg--ac-magenta ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">04</div>
</div>

Independent column and row gaps

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

01
02
03
04
05
06
<div class="ch-display--grid ch-grid-cols--3 ch-col-gap--4 ch-row-gap--2">
  <div class="ch-rounded ch-bg--ac-blue ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">01</div>
  <div class="ch-rounded ch-bg--ac-blue ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">02</div>
  <div class="ch-rounded ch-bg--ac-blue ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">03</div>
  <div class="ch-rounded ch-bg--ac-blue ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">04</div>
  <div class="ch-rounded ch-bg--ac-blue ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">05</div>
  <div class="ch-rounded ch-bg--ac-blue ch-pa--2 ch-text--center ch-color--white ch-fw--500 ch-fs--2">06</div>
</div>

Span multiple columns

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

Header
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
<div class="ch-display--grid ch-grid-cols--4 ch-col-gap--4 ch-row-gap--2">
  <div class="ch-rounded ch-bg--ac-black ch-pa--2 ch-text--center ch-color--ac-yellow ch-fw--500 ch-fs--2 ch-grid-cols-span--4">Header</div>
  <div class="ch-rounded ch-bg--ac-yellow ch-pa--2 ch-text--center ch-fw--500 ch-fs--2">Item 1</div>
  <div class="ch-rounded ch-bg--ac-yellow ch-pa--2 ch-text--center ch-fw--500 ch-fs--2">Item 2</div>
  <div class="ch-rounded ch-bg--ac-yellow ch-pa--2 ch-text--center ch-fw--500 ch-fs--2">Item 3</div>
  <div class="ch-rounded ch-bg--ac-yellow ch-pa--2 ch-text--center ch-fw--500 ch-fs--2">Item 4</div>
  <div class="ch-rounded ch-bg--ac-yellow ch-pa--2 ch-text--center ch-fw--500 ch-fs--2">Item 5</div>
  <div class="ch-rounded ch-bg--ac-yellow ch-pa--2 ch-text--center ch-fw--500 ch-fs--2">Item 6</div>
  <div class="ch-rounded ch-bg--ac-yellow ch-pa--2 ch-text--center ch-fw--500 ch-fs--2">Item 7</div>
  <div class="ch-rounded ch-bg--ac-yellow ch-pa--2 ch-text--center ch-fw--500 ch-fs--2">Item 8</div>
</div>

Span multiple rows

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

Sidebar
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="ch-display--grid ch-grid-rows--3 ch-grid-flow--column ch-gap--2">
  <div class="ch-rounded ch-bg--grey-3 ch-pa--10 ch-text--center ch-fw--500 ch-fs--2 ch-grid-rows-span--3 ch-display--flex ch-align-items--center ch-justify-content--center">Sidebar</div>
  <div class="ch-rounded ch-bg--grey-1 ch-ba--1 ch-bc--grey-3 ch-pa--10 ch-text--center ch-fw--500 ch-fs--2">Item 1</div>
  <div class="ch-rounded ch-bg--grey-1 ch-ba--1 ch-bc--grey-3 ch-pa--10 ch-text--center ch-fw--500 ch-fs--2">Item 2</div>
  <div class="ch-rounded ch-bg--grey-1 ch-ba--1 ch-bc--grey-3 ch-pa--10 ch-text--center ch-fw--500 ch-fs--2">Item 3</div>
  <div class="ch-rounded ch-bg--grey-1 ch-ba--1 ch-bc--grey-3 ch-pa--10 ch-text--center ch-fw--500 ch-fs--2">Item 4</div>
  <div class="ch-rounded ch-bg--grey-1 ch-ba--1 ch-bc--grey-3 ch-pa--10 ch-text--center ch-fw--500 ch-fs--2">Item 5</div>
  <div class="ch-rounded ch-bg--grey-1 ch-ba--1 ch-bc--grey-3 ch-pa--10 ch-text--center ch-fw--500 ch-fs--2">Item 6</div>
</div>