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>