@citizensadvice/cads-grid

Grid

Component type

• Object

Dependencies:

Name	Description
@citizensadvice/cads-support	System-wide global variables and functions

Installation

$ npm install @citizensadvice/cads-grid

@import "@citizensadvice/cads-grid/index.scss";

You can also make use of the unpkg service, try adding the link below to the head of your HTML file <link src="https://unpkg.com/@citizensadvice/cads-grid@latest/build/cads.grid.css" />

Implementation

We use a grid to add structure and consistent horizontal spacing.

Page widths

The default maximum page width is 1024px.

Gutters

Gutters are 16px and above 555px increase to 32px.

Viewport sizes

The grid column widths are based on the viewport sizes. These are:

Size	Variable	Class name	Width from	Width to
Small	$bp–sm	o-grid__unit--m-#-#	320px	554px
Medium	$bp–md	o-grid__unit--t-#-#	555px	749px
Large	$bp–lg	o-grid__unit--d-#-#	750px	1023px
X Large	$bp–xl	N/A	1024px	N/A

Full width

<div class="c-wrap">
  <div class="o-grid">
    <div class="o-grid__unit">...</div>

    or

    <div class="o-grid__unit o-grid__unit--t-1-1">...</div>
  </div>
</div>

Halves

<div class="c-wrap">
  <div class="o-grid">
    <div class="o-grid__unit o-grid__unit--t-1-2">...</div>
    <div class="o-grid__unit o-grid__unit--t-1-2">...</div>
  </div>
</div>

Thirds

<div class="c-wrap">
  <div class="o-grid">
    <div class="o-grid__unit o-grid__unit--t-1-3">...</div>
    <div class="o-grid__unit o-grid__unit--t-1-3">...</div>
    <div class="o-grid__unit o-grid__unit--t-1-3">...</div>
  </div>
</div>

<div class="c-wrap">
  <div class="o-grid">
    <div class="o-grid__unit o-grid__unit--t-2-3">...</div>
    <div class="o-grid__unit o-grid__unit--t-1-3">...</div>
  </div>
</div>

Quarters

<div class="c-wrap">
  <div class="o-grid">
    <div class="o-grid__unit o-grid__unit--t-1-4">...</div>
    <div class="o-grid__unit o-grid__unit--t-1-4">...</div>
    <div class="o-grid__unit o-grid__unit--t-1-4">...</div>
    <div class="o-grid__unit o-grid__unit--t-1-4">...</div>
  </div>
</div>
<div class="c-wrap">
  <div class="o-grid">
    <div class="o-grid__unit o-grid__unit--t-3-4">...</div>
    <div class="o-grid__unit o-grid__unit--t-1-4">...</div>
  </div>
</div>