The Grid component of the Chantelle Pattern Library

Usage no npm install needed!

<script type="module">
  import chantelleGrid from 'https://cdn.skypack.dev/@chantelle/grid';




The grid system is used through Container, Row, and Columm. Its encapsulation allows future enhancements on how the grid is managed without damaging its use over time.

As of today, the grid used is the Bootstrap Grid.


yarn add @chantelle/grid


First, include the CSS in your HTML:

<link rel="stylesheet" href="node_modules/@chantelle/grid/dist/styles.css">

Note: you can import the CSS directly into your project if your bundler supports it:

 import '@chantelle/grid/dist/styles.css';

React Component

import { Container, Row, Column } from '@chantelle/grid';


By default, the container is fluid. You can still use className to specify Bootstrap Grid classes (like col-auto), if you ever need it.

But you should use the props size, order and offset to allow easier re-use later:

  • size accepts a number (size={12}), or an object defining sizes across breakpoints (size={{xs: {12}, md: {6}, xl: {4}}})
  • order accepts a number (order={1}), or any string (order="first")
  • offset accepts an object defining offsets across breakpoints (size={{xs: {1}, md: {2}, xl: {3}}})


To use the Grid component, you can completely refer to Bootstrap Grid documentation.

<div class="container container-fluid">
  <div class="row">
    <div class="col col-12 col-md-10 offset-md-1">
      A nice column