Grid

Install                     yarn add ca-grid npm                        ca-grid

Grid uses css flex to create a grid with 12 columns.

Usage

The default import gives you compiled/compressed css file with all grid configurations.

import Grid from 'ca-grid'

You can import .scss file into your vendor file.

@import 'ca-grid/src/grid.scss'

Breakpoint

These are the defined breakpoints for the grid.

Mobile: 0 - 768px.

Tablet: 769px - 992px.

Laptop: 993px - 1200px.

Desktop: 1201px - 1600px.

Gutters

We've added flexibility for choosing the gutter width per row.

Simply choose between the below classes to change your gutter width

row: default gutter width - 16px

row--half: half of the default gutter width - 8px

row--quarter: a quarter of the default gutter width - 4px

The below example will reduce to the gutter to a quarter on all items inside the row.

<div class="row row--quarter">
	<div class="col-xs-6"></div>
	<div class="col-xs-6"></div>
</div>